/*------------------------------------------------------------------
Project:	LORDEYS - Master Starter Template
Version:	1.0
Last change:	15/08/2022
Modifier   :	Lordeys.com 
Primary use:	Showcase Portfolio 
-------------------------------------------------------------------*/

@import url("css/content.css");
@import url("css/showcase.css");
@import url("css/shortcodes.css");
@import url("css/assets.css");

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

		00. Colors
		01. General Styles
		02. Magic Cursor
		03. Page Preloader
		04. Header Elements
		05. Main Content 
		06. Footer Elements
		07. Responsive Media Querries

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

		/*--------------------------------------------------
			00. General Settings
		---------------------------------------------------*/

		:root {
			  --blk: var(--blk); 
		      --wht: var(--wht);
			  --wheat: var(dfe0d5); 
		}
    
		/*--------------------------------------------------
			01. General Settings
		---------------------------------------------------*/

			html,body{
				font-family: 'Apercu', sans-serif;
				font-weight: 400;
				font-size:16px;
				height:100%;
				width:100%;
				color:#444;
				background-color:#fff;
				user-select: none; /* supported by Chrome and Opera */
				-webkit-user-select: none; /* Safari */
				-khtml-user-select: none; /* Konqueror HTML */
				-moz-user-select: none; /* Firefox */
				-ms-user-select: none; /* Internet Explorer/Edge */		
			}
    
			.text-font-sans {
			    font-family: 'Apercu', sans-serif;
			}

			.text-font-sexy-thin {
			    font-family: 'SchnyderL-Light', serif;
			}
		    .text-font-sexy-thin i,
			.text-font-sexy-thin em,
			.text-font-italic-sexy-thin {
			    font-family: 'SchnyderL-LightItalic', serif;
			}

			html {
				box-sizing: border-box;
				margin-right: 0px!important;
				overflow: visible!important;
			}
	
			body {
				overflow: hidden;
				overflow-y:scroll;
				-webkit-transition: opacity 0.2s ease-in-out 0.2s;
				transition: opacity 0.2s ease-in-out 0.2s;
				-webkit-font-smoothing: antialiased; /* For Chrome, Safari, and other WebKit browsers on macOS */
		        -moz-osx-font-smoothing: grayscale; /* For Firefox on macOS */
			}
	
			body.smooth-scroll {
				overflow:hidden;
			}
	
			body.has-slider {
				overflow:hidden;
			}
	
			body.hidden {
				opacity:0;
			}

			main111 {
				-webkit-transition: background 0.5s ease-in-out 0s;
				transition: background 0.5s ease-in-out 0s;
			}
	
			html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
				border: 0;
				margin: 0;
				outline: 0;
				padding: 0;
				vertical-align: baseline;
			}
	
			article,
			aside,
			details,
			figcaption,
			footer,
			header,
			hgroup,
			nav,
			section {
				display: block;
			}
	
			audio {
				display: inline-block;
				max-width: 100%;
			}	
	
			address {
				font-style: italic;
				margin-bottom: 24px;
			}
	
			abbr[title] {
				border-bottom: 1px dotted #2b2b2b;
				cursor: help;
			}
	
			b,
			strong {
				font-weight: 600;
				color:#000;
			}
	
			.light-content b, .light-content strong, .dark-section b, .dark-section strong {
				font-weight: 600;
				color:#fff;
			}
	
			.light-content .light-section b, .light-content .light-section strong {
				font-weight: 600;
				color:#000;
			}
	
			cite,
			dfn,
			em,
			i {
				font-style: italic;
			}
	
			mark, ins {
				background: none repeat scroll 0 0 #000;
				text-decoration: none;
				color: #fff;
				padding: 2px 8px;
				display: inline-block;
				border-radius: 2px;
			}
	
			.light-content mark, .light-content ins, .dark-section mark, .dark-section ins {
				background: none repeat scroll 0 0 #fff;
				color:#000;
			}
	
			.light-content .light-section mark, .light-content .light-section ins {
				background: none repeat scroll 0 0 #111;
				color:#fff;
			}
	
			code,
			kbd,
			tt,
			var,
			samp,
			pre {
				font-family: monospace, serif;
				font-size: 15px;
				-webkit-hyphens: none;
				-moz-hyphens:    none;
				-ms-hyphens:     none;
				hyphens:         none;
				line-height: 1.6;
			}
	
			pre {
				-webkit-box-sizing: border-box;
				-moz-box-sizing:    border-box;
				box-sizing:         border-box;
				margin-bottom: 24px;
				max-width: 100%;
				overflow: auto;
				padding: 12px;
				white-space: pre;
				white-space: pre-wrap;
				word-wrap: break-word;
				background-color:rgba(0,0,0,0.05)
			}
	
			.light-content pre, .dark-section pre {
				background-color:rgba(255,255,255,0.05);
				color:#fff;
			}
	
			.light-content .light-section pre {
				background-color:rgba(0,0,0,0.05);
				color:#000;
			}
	
			blockquote,
			q {
				-webkit-hyphens: none;
				-moz-hyphens:    none;
				-ms-hyphens:     none;
				hyphens:         none;
				quotes: none;
			}
	
			blockquote:before,
			blockquote:after,
			q:before,
			q:after {
				content: "";
				content: none;
			}
	
			blockquote {
				color: #000;
				line-height: 1.6;
				font-size: 1.5rem;
				margin-bottom: 2.1875rem;
				font-weight: 500;
				padding-left: 3.5rem;
				margin: 0 0 1.5625rem;
				position:relative;
			}
	
			.light-content blockquote, .dark-section blockquote {
				color: #fff;
			}
	
			.light-content .light-section blockquote {
				color: #000;
			}
	
			blockquote::before {
				content: "\275D";
				position: absolute;
				left: 0;
				top: 5px;
				line-height: 1;
				font-size: 3rem;
				font-weight: 500;
			}
	
			blockquote cite,
			blockquote small {
				color: #2b2b2b;
				font-size: 16px;
				font-weight: 400;
				line-height: 1.5;
			}
	
			.light-content blockquote cite, .light-content blockquote small {
				color:#fff;
			}
	
			blockquote em,
			blockquote i,
			blockquote cite {
				font-style: normal;
			}
	
			blockquote strong,
			blockquote b {
				font-weight: 600;
			}
	
			small {
				font-size: smaller;
			}
	
			big {
				font-size: 125%;
			}
	
			sup,
			sub {
				font-size: 75%;
				height: 0;
				line-height: 0;
				position: relative;
				vertical-align: baseline;
			}
	
			sup {
				bottom: 1ex;
			}
	
			sub {
				top: .5ex;
			}
	
			dl {
				margin-bottom: 24px;
			}
	
			dt {
				font-weight: bold;
			}
	
			dd {
				margin-bottom: 24px;
			}
	
			ul,
			ol {
				list-style: none;
				margin: 0 0 24px 20px;
			}
	
			ul,
			ol {
				list-style: none;
				margin:20px;
			}
	
			ul {
				list-style: disc;
			}
	
			ol {
				list-style: decimal;
			}
	
			li > ul,
			li > ol {
				margin: 20px;
			}
	
			li {
				line-height: 20px;
				color:#444;
				margin-bottom:25px;
				list-style: none;
			}
	
			.light-content li, .dark-section li {
				color: #ccc;
			}
	
			.light-content .light-section li {
				color: #444;
			}
	
			figure {
				margin:0;
				position:relative;
				display: block;
			}
	
			figure.has-parallax {		
				overflow:hidden;
			}
	
			.full figure.has-parallax {		
				overflow:hidden;
				height:100vh;
			}
	
			figure img {
				max-width:100%;
			}
	
			.has-parallax-content > img, .has-parallax > img {
				width:100%;
				height: 100%;
				position:absolute;
				display:block;
				object-position: center; 
				object-fit: cover;
			}
	
			figcaption {
				background-color: rgba(0,0,0,0.3);
				bottom: 0px;
				color: #fff;
				font-weight:400;
				font-size: 10px;
				padding: 5px 10px;
				position: absolute;
				right: 0px;
				z-index: 10;
				border-radius:0;
			}
	
			fieldset {
				border: 1px solid rgba(0, 0, 0, 0.1);
				margin: 0 0 24px;
				padding: 0;
			}
	
			legend {
				white-space: normal;
			}
	
			button,	input {
				line-height: normal;
			}
	
			input,
			textarea {
				background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); /* Removing the inner shadow, rounded corners on iOS inputs */
			}
	
			button, html input[type="button"], input[type="reset"], input[type="submit"] {
				cursor: pointer;
			}
	
			button[disabled],
			input[disabled] {
				cursor: default;
			}
	
			input[type="checkbox"],
			input[type="radio"] {
				padding: 0;
			}
	
			input[type="search"] {
				-webkit-appearance: textfield;
			}
	
			input[type="search"]::-webkit-search-decoration {
				-webkit-appearance: none;
			}
	
			button::-moz-focus-inner, input::-moz-focus-inner {
				border: 0;
				padding: 0;
			}
	
			textarea {
				overflow: auto;
				vertical-align: top;
			}
	
			table {
				border-collapse: separate;
				border-spacing: 0;
				border-width: 1px 0 0 1px;
				margin-bottom: 24px;	
				width: 100%;
				color:#444;
			}
	
			thead, .light-content .light-section thead {
				background-color:rgba(0,0,0,1);
				color:#fff;
			}
	
			.light-content thead, .dark-section thead {
				background-color:rgba(255,255,255,1);
			}
	
			thead tr, .light-content .light-section thead tr {
				color:#fff;
			}
	
			.light-content thead tr, .dark-section thead tr {
				color:#000;
			}
	
			tr, .light-content .light-section tr {
				color:#444;
			}
	
			.light-content tr, .dark-section tr{
		    	color:#CCC;
			}
	
			tr:nth-child(2n), .light-content .light-section tr:nth-child(2n) {
		    	background-color:rgba(0,0,0,0.05);
			}
	
			.light-content tr:nth-child(2n), .dark-section tr:nth-child(2n){
		    	background-color:rgba(255,255,255,0.1);
			}
	
			caption, th, td {
				font-weight: normal;
				text-align: left;
			}
	
			th {
				border-width: 0 1px 1px 0;
				padding: 10px;
			}
	
			td {
				border-width: 0 1px 1px 0;
				padding: 10px;
			}
	
			del {
				color: #767676;
			}
	
			hr {
				border: 0;
				height: 28px;
				width:100%;
				float:none;
				margin:0;
				display:inline-block;
				opacity: 1!important;
				-webkit-transition: translateY(0px)!important;
				transform: translateY(0px)!important;
			}
	
			hr.animated-line {
				height:1px;		
				padding-top:20px;
				padding-bottom:20px;
			}
	
			hr.animated-line:before {
				content: ""; 
				display: block; 
				width:0;
				height:1px;
				background:rgba(0,0,0,0.1);
			}
	
			.light-content hr.animated-line:before, .dark-section hr.animated-line:before {
				background:rgba(255,255,255,0.15);
			}
	
			.light-content .light-section hr.animated-line:before {
				background:rgba(0,0,0,0.1);
			}
	
			hr.animated.animated-line:before {
				width:100%;
				-webkit-transition: width 0.7s ease-in-out 0.1s;
				transition: width 0.7s ease-in-out 0.1s;
			}
	
			hr:after {
				clear: both;
				content: " ";
				display: block;
				height: 0;
				visibility: hidden;
			}
	
			::selection {
				background: #000;
				color: #fff;
				text-shadow: none;
			}
	
			::-moz-selection {
				background: #000;
				color: #fff;
				text-shadow: none;
			}
	
			img {
				border: 0 none;
				max-width: 100%;
				vertical-align: middle;
				height:auto;
			}
		
			h1, h2, h3, h4, h5, h6 {		
				font-family:inherit;
				font-weight:500;
				color:#000;
				margin-bottom:20px;
			}
	
			.primary-font-title {
				font-family: 'SchnyderL-Light', sans-serif;
				font-weight:500;
			}
	
			.big-title {
				font-size: calc(1rem + 8vw);
		  		line-height: calc(1rem + 7.5vw);
			}
	
			.fixed-title {
				font-size: calc(1rem + 8vw);
		  		line-height: calc(1rem + 7.5vw);
				margin-bottom:100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100vh;
			}
	
			.fixed-title.primary-font-title {
				font-size: calc(1rem + 24.15vw);
				line-height: calc(1rem + 22vw);
			}
	
			.fixed-title div {
				display:inline-block;		
				white-space: nowrap;
			}
	
			.fixed-title span {
				display: block;
				opacity:0.1;
				margin-top:0;
				min-width:3rem;
				box-sizing:border-box;
				display:inline-block;
				transform-origin: bottom center;
			}
	
	
			h1{
				font-size: calc(1rem + 4.15vw);
				line-height: calc(1rem + 4.5vw);
			}
	
			h2{
				font-size: calc(1rem + 2.2vw);
		        line-height: calc(1rem + 2vw);
			}
	
			h3{
				font-size: calc(1rem + 2vw);
				line-height: calc(1rem + 2.5vw);
			}
	
			h3.title-mid   {
			    font-size: calc(1rem + 1vw);
		        line-height: calc(1rem + 1vw);
			} 

			h4{
				font-size: calc(1rem + 1vw);
				line-height: calc(1rem + 1.6vw);
			}
	
			h5{
				font-size: calc(1rem + 0.6vw);
				line-height: calc(1rem + 1.5vw);
			}
	
			h6 {
				font-size:18px;
				line-height: 36px;
			}
	
			h6.has-icon {
				padding-left: 20px;
				box-sizing: border-box;
				display: inline-block;
				width: auto;
				position: relative;
			}
	
			h6.has-icon::before {
				font: var(--fa-font-solid);
				content: "\f101";
				font-size: 12px;
				line-height: inherit;
				text-align: left;
				position: absolute;
				left: 0;
			}
	
			.no-margins {
				margin:0;
			}
	
			.light-content h1, .light-content h2, .light-content h3, .light-content h4, .light-content h5, .light-content h6, .dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section h5, .dark-section h6 {
				color: #fff;
			}
	
			.light-content .light-section h1, .light-content .light-section h2, .light-content .light-section h3, .light-content .light-section h4, .light-content .light-section h5, .light-content .light-section h6 {
				color: #000;
			}
	
			p {
				font-size:1.2rem;
				line-height: normal;
				font-weight:500; 
			}
	
			.light-content p, .dark-section p {
				color:#999;
			}
	
			.light-content .light-section p {
				color:#999;
			}
	
			.bigger {
				font-size: 26px;
				line-height: 42px;
			}
	
			.smaller {
				font-size: 12px;
				line-height: 24px;
			}
	
			.container {
				max-width:1280px;
				width:100%;
				margin:0 auto;
				box-sizing:border-box;
			}
	
			.container::after {
				clear: both;
				content: " ";
				display: table;
			}
	
			a:hover, a:active {
			  outline: 0;
			  color: #000;
			}
	
			a, .light-content .light-section a {
				text-decoration: none;
				color: #000;
				outline: 0;
			}
	
			.light-content a, .dark-section a, .white-header a {
				color: #fff;
			}
	
			.light-content .white-header a { 
				color:#000;		
			}
	
			a:hover {
				text-decoration:none;
			}
	
			.one_half {
		    	width: 48%!important;
			}	

			.one_third {
				width: 30.6%!important;
			}	

			.one_fourth {
				width: 22%!important;
			}	

			.one_fifth {
				width: 16.8%!important;
			}

			.one_fifth_full {
				width: 20% !important;
			}		

			.one_sixth {
				width: 13.33%!important;
			}	

			.two_fifth {
				width: 37.6%!important;
			}	

			.two_fourth {
				width: 48%!important;
			}		

			.two_third {
				width: 65.33%!important;
			}	

			.three_fifth {
				width: 58.4%!important;
			}	

			.three_fourth {
				width: 74%!important;
			}	

			.four_fifth {
				width: 79.2%!important;
			}	

			.five_sixth {
				width: 82.67%!important;
			}	

			.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .two_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth {
				float: left!important;
				margin-bottom: 1px!important;
				margin-right: 4%!important;
				position: relative!important;
			}

		    .one_fifth_full {
				float: left!important;
			    margin-bottom: 0px !important;
		        margin-right: 0% !important;
				position: relative!important;
		    }

			.last {
				margin-right:0px!important;
			}
	
			.text-align-left {
				text-align:left;
			}
	
			.text-align-center {
				text-align:center;
			}
	
			.text-align-right {
				text-align:right;
			}
	
			.outer {
				display:table;
				width:100%;
				height:100%;
			}
	
			.inner {
				display:table-cell;
				vertical-align:middle;
				-webkit-box-sizing:border-box;
				-moz-box-sizing:border-box;
				box-sizing:border-box;
			}
	
			.light-section-wrapper, .dark-section-wrapper {
				margin-left: calc(50% - 50vw)!important;
				margin-right: calc(50% - 50vw)!important;
				max-width: 1000%!important;
				width: 100vw!important;
			}
	
			.light-section-container, .dark-section-container {
				position: relative;
				box-sizing: border-box;
				width: 100%;
				margin: 0 auto;
			}
	
			.content-row {
				position:relative;
				width:100%;
				margin:0 auto;
				z-index:1;
				opacity:1;
				box-sizing:border-box;
			}
		    .centered-subtitle {
		        padding: 3rem 0; 
			}	
			.extra-padded-sides {
			    padding-left: 1%;
		        padding-right: 1%;
		        max-width: 59%;
				margin-left: auto;
		        margin-right: auto;
			}
			.centered-subtitle.padded-text { 
			    width: 620px;
		        margin-left: auto;
		        margin-right: auto;
			}
			.centered-paragraph.padded-text { 
			    width: 820px;
		        margin-left: auto;
		        margin-right: auto;
			}	
			.clip-effects {
				overflow:hidden;
				clip-path: inset(4% 10% round 40px);
			}
	
			.content-row::after {
				clear: both;
				content: " ";
				display: table;
			}
	
			.small {
				max-width:820px;
				width:100%;
				margin:0 auto;
			}
	
			.large {
				max-width:1380px;
				width:100%;
				margin:0 auto;
			}
	
			.full {
				margin-left: calc(50% - 50vw)!important;
				margin-right: calc(50% - 50vw)!important;
				max-width: 1000%!important;
				width: 100vw!important;
			}
	
			.row_padding_top {
				padding-top:5vw;
			}
	
			.row_padding_bottom {
				padding-bottom:5vw;
			}
	
			.row_margin_bottom {
				margin-bottom:5vw;
			}
	
			.row_padding_left {
				padding-left:80px;
			}
	
			.row_padding_right {
				padding-right:80px;
			}
	
			.no_padding_top {
				padding-top:0px !important;
			}

			.no_padding_bottom {
				padding-bottom:0px !important;
			} 

			.row_padding_all {
				padding-top: 4vw;
				padding-bottom: 4vw;
				padding-left: 80px;
				padding-right: 80px;
			}
	
			#rotate-device {
				width:100%;
				height:100%;
				position:fixed;
				z-index:1000;
				top:0;
				left:0;
				background-color:#0f1010;
				background-image:url(images/rotate.png);
				background-size:100px 100px;
				background-position:center;
				background-repeat:no-repeat;
				display:none;
			}
	
			i.arrow-icon {
				border: solid #000;
				border-width: 0px 3px 3px 0px;
				box-sizing:border-box;
				display: block;
				position:relative;
				top:0px;
				left:0px;
				height:20px;
				width:20px;
			}
	
			.light-content i.arrow-icon, .dark-content .item i.arrow-icon {
				border: solid #fff;
				border-width: 0px 3px 3px 0px;
			}
	
			.light-content .change-header i.arrow-icon, .dark-content .change-header i.arrow-icon {
				border: solid #000;
				border-width: 0px 3px 3px 0px;
			}
	
			i.arrow-icon::after {
				content: "";
				position: absolute;
				width: 28px;
				height: 3px;
				top: 7px;
				left: -6px;
				background-color: #000;
				transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
			}
	
			.light-content i.arrow-icon:after, .light-content .change-header i.arrow-icon::after, .dark-content .item i.arrow-icon::after {
				background-color:#fff;
			}
	
			.light-content .change-header i.arrow-icon::after, .dark-content .change-header i.arrow-icon::after {
				background-color:#000;
			}
	
			i.arrow-icon-down {
				border: solid #222;
				border-width: 0px 2px 2px 0px;
				box-sizing:border-box;
				display: block;
				position:relative;
				top:14px;
				left:14px;
				height: 12px !important;
				width: 12px !important;
				line-height: 12px !important;
			}
	
			i.arrow-icon-down.left {
				transform: rotate(135deg);
				-webkit-transform: rotate(135deg);
			}
	
			i.arrow-icon-down::after {
				content: "";
				position: absolute;
				width: 16px;
				height: 2px;
				top: 4px;
				left: -3px;
				background-color: #222;
				transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
		
			}
	
			.light-content i.arrow-icon-down {
				border: solid #fff;
				border-width: 0px 2px 2px 0px;
			}
	
			.light-content i.arrow-icon-down::after {
				background-color: #fff;
			}
	
			i.arrow-icon-up {
				border: solid #222;
				border-width:  2px 2px 0px 0px;
				box-sizing:border-box;
				display: block;
				position:relative;
				top:14px;
				left:14px;
				height: 12px !important;
				width: 12px !important;
				line-height: 12px !important;
			}	
	
			i.arrow-icon-up.right {
				transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
			}	
	
			i.arrow-icon-up::after {
				content: "";
				position: absolute;
				width: 16px;
				height: 2px;
				top: 4px;
				left: -3px;
				background-color: #222;
				transform: rotate(-45deg);
				-webkit-transform: rotate(-45deg);
			}
	
			.light-content i.arrow-icon-up {
				border: solid #fff;
				border-width:  2px 2px 0px 0px;
			}
	
			.light-content i.arrow-icon-up::after {
				background-color: #fff;
			}

		@keyframes fade-down {
			0% {
		       opacity: 0;
			   transform: translateY(-40px); 
			}
			25% {
		       opacity: 0.25;
			   transform: translateY(-30px); 
			}
			50% {
		       opacity: 0.5;
			   transform: translateY(-20px); 
			}	
			75% {
		       opacity: 0.75;
			   transform: translateY(-10px); 
			}						
			100% { 
		       opacity: 1;
			   transform: translateY(0px); 
			}	
		}
.first,
.other {
    opacity: 0;
    transform: translateY(-20px);
}
.loaded-section .first {
    animation: fade-down 1s 1s ease-in-out both;
}
.loaded-section .other {
    animation: fade-down 1s 1.5s ease-in-out both;
}
		.loaded-section .eight-items-loading .tile {
			background: rgba(200, 201, 187,1); 
		}
		/* Jewerlly Slider  */
		.content-slider .clapat-slider-viewport {
			width: 100%;
			overflow: hidden; 
		}
		.content-slider.two-cols .clapat-pagination {
		    bottom: 100px;
		}
		.content-slider.two-cols .clapat-slide { 
		    flex: 0 0 100%; max-width: 100%; 
		}
		.two-collumns {
			width: 100%; 
			display: flex;
		    flex-wrap: nowrap;
		}
		.two-collumns .left,
		.two-collumns .right {
		    width: 50%;  
		}
		.two-collumns .left img,
		.two-collumns .right img {
		  display: block;
		  backface-visibility: hidden;
		} 
		.two-collumns img.square {
		    width: 100%; 
		    height: 100%;
		    object-fit: cover;
		    object-position: center center;
		    display: block;
		}
		@-webkit-keyframes fade-left-to-right {
		  0% {
		    opacity: 0;
		    transform: translateX(-10px);
		    -webkit-clip-path: inset(0 100% 0 0);
		            clip-path: inset(0 100% 0 0);
		  }
		  100% {
		    opacity: 1;
		    transform: translateX(0);
		    -webkit-clip-path: inset(0 0 0 0);
		            clip-path: inset(0 0 0 0);
		  }
		}
		@keyframes fade-left-to-right {
		  0% {
		    opacity: 0;
		    transform: translateX(-10px);
		    -webkit-clip-path: inset(0 100% 0 0);
		            clip-path: inset(0 100% 0 0);
		  }
		  100% {
		    opacity: 1;
		    transform: translateX(0);
		    -webkit-clip-path: inset(0 0 0 0);
		            clip-path: inset(0 0 0 0);
		  }
		}
		.clapat-slide-active .left {
		  -webkit-animation: fade-left-to-right 1.5s ease-in-out forwards;
		          animation: fade-left-to-right 1.5s ease-in-out forwards;
		} 
		.clapat-slide-active .right { 
		  -webkit-animation: fade-left-to-right 1.5s ease-in-out forwards;
		          animation: fade-left-to-right 1.5s ease-in-out forwards;
		}
		.clapat-slider-wrapper.wheat.light-cursor .clapat-pagination-bullet .path,
		.clapat-slider-wrapper.wheat.light-cursor .clapat-pagination-bullet .solid-fill {
		    stroke: #dfe0d5 !important;
		}  
		/* end Jewerlly Slider  */

		/* The Oscars Page */

		        /* The Oscars Grid */
		.collage.oscars-gal {
		  --gap: 0px;               /* gutter between red boxes */
		  --border: 0px;             /* the red frame thickness */
		  display: grid;
		  gap: var(--gap);
		  grid-template-columns: repeat(5, 1fr);
		  grid-template-rows: auto auto;
		  grid-template-areas:
		    "A B C D E"
		    "A F F G H";
		  width: 100%; 
		  margin-left: 0px;
		  margin-right: 0px;  
		  background: #ff4d37;       /* outer red frame */
		  border-radius: 0px;
		}

		/* --- Tiles --- */
		.tile {
		  position: relative;
		  overflow: hidden;
		  border-radius: 0px;
		  margin: 0px; 
		}
		.tile.square,
		.tile.landscape {
		  height: 350px;
		}
		/* Make images fill their boxes nicely */
		.tile img {
		  position: absolute;
		  inset: 0;
		  width: 100%;
		  height: 100%;
		  object-fit: cover;
		}

		/* --- Place each tile into the layout --- */
		.t1 { grid-area: A; }
		.t2 { grid-area: B; }
		.t3 { grid-area: C; }
		.t4 { grid-area: D; }
		.t5 { grid-area: E; }
		.t6 { grid-area: F; }
		.t7 { grid-area: G; }
		.t8 { grid-area: H; }

		/* --- Aspect helpers to keep the collage proportions consistent --- */
		/* Default: square boxes via a ratio shim; the image then covers it */
		.tile::before { content: ""; display: block; aspect-ratio: 1 / 1; }

		/* Tall hero on the left (spans two rows) */
		.t1::before { aspect-ratio: 1 / 2.05; }      /* adjust if you want it taller/shorter */

		/* Wide gold fan (spans two columns in the second row) */
		.t6::before { aspect-ratio: 2 / 1; }         /* 2:1 wide */

		/* Optionally make some top-row tiles slightly portrait/landscape */
		.t2::before { aspect-ratio: 4 / 3; }
		.t3::before { aspect-ratio: 4 / 5; }
		.t4::before { aspect-ratio: 3 / 4; }
		.t5::before { aspect-ratio: 1 / 1; }

		/* --- Responsiveness --- */
		/* Medium: 3 columns */
		@media (max-width: 900px) {
		  .collage.the-oscars {
		    grid-template-columns: repeat(3, 1fr);
		    grid-template-areas:
		      "A A B"
		      "A A C"
		      "D E F"
		      "G H H";
		  }
		  /* tweak some ratios for nicer stacking */
		  .t1::before { aspect-ratio: 3 / 4; }
		  .t6::before { aspect-ratio: 3 / 2; }
  
		  .tile.square, .tile.landscape {
		    height: 100% !important;
		  }
		}

		/* Small: 2 columns */
		@media (max-width: 600px) {
		  .collage.the-oscars {
		    grid-template-columns: repeat(2, 1fr);
		    grid-template-areas:
		      "A A"
		      "B C"
		      "D E"
		      "F G"
		      "H H";
		  }
		  .t1::before { aspect-ratio: 2 / 3; }
		  .t6::before { aspect-ratio: 2 / 1; }
		}
		       /* end The Oscars Grid */
		.oscars-content ul,
		li.shop-details p {
		      margin:0px !important; 
		}	
		.oscars-content .subtitle {
		   padding-top: 1.5rem; 
		}  
		.big-text,  
		.oscars-content .subtitle p {
		    font-size: 1.3rem; 
		}	
		/* End The Oscars Page /
		/* Friends of SVG /
		   /* Horizontal scrolling Section wrapper (gets a computed height to enable scroll) */
		 .griddy-5 { position: relative; }

		  /* Horizontal row we pin and move */
		  .griddy-5 .griddy-container{
		    display:flex;
		    align-items:stretch;
		    gap: 0px;
		  }

		  /* Exactly five columns per screen */
		  .griddy-5 .panel-g{
		    flex: 0 0 20vw;               /* 20% of viewport width */
		    min-width: 20vw;
		  }

		  .griddy-5 figure{
		    display:flex;
		    flex-direction:column;
		    height:100%;
		    background:#161616;
		    overflow:hidden;
		    margin: 0px;
		  }

		  /* Image fills the column, caption sits below */
		  .griddy-5 img{
		    width:100%;
		    aspect-ratio: 4 / 5;          /* adjust to your images */
		    object-fit: cover;
		    display:block;
		    flex: 1 1 auto;
		  }

		  .griddy-5 figcaption{
		    padding: .7rem .9rem;
		    text-align:center;
		    color:#fff;
		    background:#1f1f1f;
		  }
		/* End Friends of SVG /  

		/*--------------------------------------------------
			02. Magic Cursor - removed 
		---------------------------------------------------*/	
		header {
			-webkit-transition: all 0.4s ease-in-out 0.3s;
		    transition: all 0.4s ease-in-out 0.3s;
		}
		header.compressed {
		    padding: 0px 80px;
			height: 100px;
			background: #dfe0d5 !important;
		}
		header #logo {
			-webkit-transition: all 0.4s ease-in-out 0.4s;
		    transition: all 0.4s ease-in-out 0.4s;
		} 
		header.compressed #logo {
		    top: -10px;  
		}
		header nav {
			-webkit-transition: all 0.5s ease-in-out  0.3s;
		    transition: all 0.5s ease-in-out  0.3s;
		} 	
		header.compressed nav {
		    margin: -25px 0;
		} 
		a.now-active {
			/* font-weight: bold !important;  */
		} 
        /* Slide in */

/* Base: hide underline off-screen */
a.slide-underline {
  position: relative;
  overflow: hidden;
}

/* the underline */
a.slide-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;                  /* underline thickness */
  width: 100%;
  background: currentColor;     /* inherits text color */
  
  transform: translateX(-100%); /* hidden from left */
  transition: transform 0.35s ease;
  opacity: 1;
}

/* when link is hovered — underline slides in */

/* 
a.slide-underline:hover::after,
a.slide-underline:focus::after {
  transform: translateX(0);
}

*/

/* when link becomes active on scroll */
a.slide-underline.now-active::after {
  transform: translateX(0);
}

		/*--------------------------------------------------
			03. Page Preloader
		---------------------------------------------------*/	
	
			.disable-ajaxload .preloader-wrap {
				display:none;
			}
	
			.preloader-wrap {
				width: 100%;
				height:100%;
				position: fixed;
				top: 0; 
				bottom: 0;
				background: #000;
				z-index : 1800;
				text-align:center;
			}
	
			.preloader-wrap .outer {
				padding: 0px;
				box-sizing:border-box;
			}
	
			.preloader-wrap .inner {
				vertical-align:middle;
				box-sizing:border-box;
			}
	
			.percentage-wrapper {
				position:relative;
				display:block;
				text-align:center;
				float:left;
				width:auto;
				overflow:hidden;
				z-index:10;
				mix-blend-mode: difference;
			}
	
			.percentage {
				opacity: 1;
				font-size: 16px;
				line-height: 60px;
				width:50px;
				font-weight: 500;
				color:#000;		
				display: table;
				margin: 0 auto;
				margin-top:1px;
				opacity:0;
				text-align:center;
			}
	
			.percentage::after {
				content: "%";
			}
	
			.percentage-intro {
				height: 20px;
				font-size: 16px;
				font-weight: 500;
				line-height: 20px;
				color:rgba(255,255,255,0.6);
				position: absolute;
				bottom: 60px;
				left: 0;
				right: 0;
				margin: 0 auto;
			}
	
			.trackbar {
				width: 100%;
				height: 100%;
				clip-path: inset(45% 40% 45% 40%);
				margin: 0 auto;
				display: flex;
				position: absolute;
				top:0;
				left:0;
				padding: 0 80px;
				box-sizing:border-box;
				opacity: 1;
				background: rgba(255,255,255,0.05);
			}
	
			.loadbar {
				width: 0;
				height: 100%;
				background: #dfe0d5;
				position: absolute;
				top: 0px;
				left: 0;
				right: auto;
				overflow: hidden;
				z-index:0;
			}
	
			.loadbar-inner {
				width: 100%;
				height: 100%;
				background: #000;
				position: absolute;
				top: 0px;
				left: auto;
				right: auto;
				overflow: hidden;
				z-index:20;
				clip-path: circle(0%);
			}
	
			.hold-progress-bar {
				width: 0%;
				height: 0px;
				background: rgba(0,0,0,1);
				position: absolute;
				top: 0px;
				left: 0;
				right:0;
				overflow: hidden;
			}
	
			.preloader-intro {
				position:relative;
				display:block;
				color:#dfe0d5;
				overflow:hidden;
				padding-left:0vw;		
				float:right;
				z-index:10;
				mix-blend-mode: difference;		
				opacity:0;
			}
	
			.uppercase-titles .preloader-intro {
				text-transform:uppercase;
			}
	
			.preloader-intro span {
				position: relative;
				display:block;
				font-weight:500;
				position: relative;
				font-size: 16px;
				line-height: 60px;
			}
	
		/*--------------------------------------------------
			04. Header Elements
		---------------------------------------------------*/	
	    /* Load Items in Order gracefully */
		#first-to-load {
             opacity: 0;
             animation: fadeIn 1.2s ease-out forwards;
		} 
		@keyframes fadeIn {
        to {
                 opacity: 1;
            }
        }
			header {
				width:100%;
				height:120px;
				left:0;
				top:0;
				background-color:transparent;
				position:fixed;
				box-sizing:border-box;
				z-index:1000;
				pointer-events:none;
				-webkit-transition: background 0.4s ease-in-out 0.3s;
				transition: background 0s ease-in-out 0s;
			}
	
			#header-container {
				box-sizing: border-box;
				height: inherit;
				padding: 16px 80px;
				margin: 0 auto;
				position: relative;
				width: 100%;
				z-index: 20;
				opacity: 0;
			}
	
			.header-visible #header-container{
				opacity:1;
			}
	
			#logo {
				position: relative;
				pointer-events: initial;
				z-index: 10;
				top: 15px;
				/* float: left;
				display: table;  */ 
				display: flex; 
				justify-content: center;
			}
	
			#logo a {
				display:block;
				-webkit-transition: transform 0.5s ease-in-out 0.1s;
				transition: transform 0.5s ease-in-out 0.1s;	
			}
	
			#logo a.disable, .open #logo a {
				pointer-events: none;
			}
	
			#logo img {
				display: block;
				height: 50px;
				width: 200px;
				max-width:none;
				-webkit-transition: opacity 0.15s ease-in-out 0s;
				transition: opacity 0.15s ease-in-out 0s;
			}
	
			#logo img.black-logo {
				opacity:1;
			}
	
			.light-content #logo img.black-logo {
				opacity:0;
			}
	
			#logo img.white-logo {
				position:absolute;
				top:0;
				left:0;
				opacity:0; 
			}

			#logo img.black-logo, 
			#logo img.white-logo { 
				right: 0px;
		        margin-left: auto;
		        margin-right: auto;
			}

  
			.light-content #logo img.white-logo {
				opacity:1;
			}
	
			.white-header #logo img.black-logo {
				opacity:0;
			}
	
			.light-content .white-header #logo img.black-logo {
				opacity:1;
			}
	
			.light-content .white-header.over-white-section #logo img.black-logo, .show-loader1 .light-content .white-header #logo img.black-logo {
				opacity:0;
			}
	
			.white-header #logo img.white-logo {
				opacity:1;
			}
	
			.light-content .white-header #logo img.white-logo {
				opacity:0;
			}
	
			.light-content .white-header.over-white-section #logo img.white-logo, .show-loader1 .light-content .white-header #logo img.white-logo {
				opacity:1;
			}
	
			.menu-open.light-content .slide-in #logo img.white-logo {
				opacity:1;
			}
	
			nav {
				pointer-events: none;
			}
	
			nav.open {
				pointer-events: initial;
			}
	
			.dark-content-header #logo img.black-logo {
				opacity:1!important;
			}
	
			.dark-content-header #logo img.white-logo {
				opacity:0!important;
			}
	
			.light-content-header #logo img.black-logo {
				opacity:0!important;
			}
	
			.light-content-header #logo img.white-logo {
				opacity:1!important;
			}

			@media all and (min-width: 1025px) {
		
				.classic-menu nav {
					position: relative;
					width: auto;
					top: 0px;
					-webkit-transition: all 0.5s ease-in-out  0.3s;
					transition: all 0.5s ease-in-out  0.3s;
					/* display:block;
					float:right; */
					display:flex; 
					justify-content: center;
					height: 60px;
					margin: 16px 0;
					
				}
		
				.classic-menu .flexnav {
					display: block;
					float: right;
					position: relative;
					width: auto;
					max-height: 60px;
				}
		
				.classic-menu .flexnav li ul {   
					min-width: 180px;
				}	
		
				.classic-menu .flexnav .touch-button {
					background: transparent none repeat scroll 0 0;
				}	
		
				.flexnav .touch-button .navicon {
					display:none;
				}
		
				.classic-menu .flexnav li {    
					background: transparent none repeat scroll 0 0;
					padding:0 10px; 
					padding-bottom:20px;
					padding-top:20px;
				}
		
				.classic-menu .menu-timeline {
					opacity:1!important;
					-webkit-transition: translateY(0px)!important;
					transform: translateY(0px)!important;
					pointer-events:initial;
				}
		
				.classic-menu .flexnav li:last-child {
					padding-right:0px;
				}
		
				.classic-menu .before-span {
					opacity:1!important;
					-webkit-transition: translateY(0px)!important;
					transform: translateY(0px)!important;
				}
		        .classic-menu .flexnav li a:hover {
					/* border-bottom: 1px solid #000;   */
				}
				.classic-menu .flexnav li a {    
					background: transparent none repeat scroll 0 0;
					padding: 0;
					position:relative;
					border-left: medium none;
					color:#222;		
					font-size:1rem;
					font-weight:500;
					line-height:24px;
					display:block;
					overflow:hidden;			
				}
		
				.light-content .classic-menu .flexnav li a { 
					color:#fff;		
				}
		
				.light-content  .classic-menu.white-header .flexnav li a { 
					color:#222;		
				}
		
				.classic-menu.white-header .flexnav li a { 
					color:#fff;		
				}
		
				.flexnav:hover li a {
					color: rgba(0,0,0,0.4);
				}
		
				.light-content .classic-menu .flexnav:hover li a {
					color: rgba(255,255,255,0.4);
				}
		
				.classic-menu.white-header .flexnav:hover li a {
					color: rgba(255,255,255,0.4);
				}
		
				.light-content  .classic-menu.white-header .flexnav:hover li a {
					color: rgba(0,0,0,0.4);	
				}
		
				.classic-menu .flexnav li:hover a {
					color:#222;
				}
		
				.light-content .classic-menu .flexnav li:hover a {
					color:#fff;
				}
		
				.classic-menu.white-header .flexnav li:hover a {
					color:#fff;
				}
		
				.light-content .classic-menu.white-header .flexnav li:hover a {
					color:#222;
				}
	
				.classic-menu .flexnav li a span {
					position: relative;
					display: block;
					-webkit-transition: -webkit-transform 0.2s;
					transition: transform 0.2s;
					transform-origin: 100% 0%;
				}
		
				.classic-menu .flexnav li a span::before {
					position: absolute;
					top: 100%;
					width:100%;
					left:0;
					content: attr(data-hover);
				}
		
				.classic-menu .flexnav li:hover a span {
				/*	-webkit-transform: translateY(-100%);   */
				/*	transform: translateY(-100%); */
				/*	transform-origin: 0% 0%; */ 
				}
		
				.classic-menu .flexnav li a span:nth-child(2), .classic-menu .flexnav li a span:nth-child(3) {
					display:none;
				}
		
				.classic-menu .flexnav li ul li a { 
					padding:0 20px 20px;
					background-color:transparent;
					font-size:14px;
					font-weight:400;
					text-transform:none;
					color:#fff!important;
					opacity:0.6;
					-webkit-transition: all 0.05s ease-in-out;
					-moz-transition: all 0.05s ease-in-out;
					-o-transition: all 0.05s ease-in-out;
					-ms-transition: all 0.05s ease-in-out;
					transition: all 0.05s ease-in-out;
				}
		
				.classic-menu .flexnav li ul li a.link::before {
					display:none;
				}
		
				.classic-menu .flexnav li ul li a.active, .classic-menu .flexnav li ul li a:hover {
					opacity:1;
				}
		
				.classic-menu .flexnav li > ul li {
					margin-left:0;
					padding:0;
					opacity: 1 !important;
					transform: none !important;
				}
		
				.classic-menu .flexnav li ul {
					-webkit-transform: translate3d(0px, 30px, 0px);
					transform: translate3d(0px, 30px, 0px);
					display:block!important;
					opacity:0!important;
					height:inherit!important;
					overflow:visible!important;
					visibility:hidden;
					left:15px;
					top:60px;
					padding-top:20px;
					background: #000;		
					border-radius:3px;
					-webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out!important;
					transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out!important;
				}
		
				.classic-menu .flexnav li:last-child ul {
					left:auto;
					right:-10px;
				}
		
				.classic-menu .flexnav li ul ul {
					left:5px!important;

				}
		
				.classic-menu .flexnav li ul:after {
					display: block;
					content: '';
					position: absolute;
					top: -6px;
					left: 20px;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 0 10px 9px;
					border-color: transparent transparent #000;
				}
		
				.classic-menu .flexnav li:last-child ul:after {
					left: auto;
					right: 20px;
				}
		
				.classic-menu .flexnav ul li ul:after {
					display: block;
					content: '';
					position: absolute;
					top: 15px;
					left: -10px;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 0 10px 9px;
					border-color: transparent transparent #000;
					-webkit-transform: rotate(-90deg);
					transform: rotate(-90deg);
				}
		
				.classic-menu .flexnav li ul li > ul, .classic-menu .flexnav li ul.open ul.open {
					top: -5px;
					z-index:10;
				}
		
				.classic-menu .flexnav li:last-child ul li > ul, .classic-menu .flexnav li:last-child ul.open ul.open {
					margin-left: -100%;
					left:-5px!important;
					right:auto;
					top: 0;
				}
		
				.classic-menu .flexnav li:last-child ul li ul::after {
					right: -10px;
					-webkit-transform: rotate(90deg);
					transform: rotate(90deg);
				}
		
				.classic-menu .flexnav ul li ul li a {
					background: #000;
				}
		
				.classic-menu .flexnav ul li ul li ul li a {
					background: #000;
				}
		
				.classic-menu .flexnav li ul.flexnav-show {
					-webkit-transform: translate3d(0px, 0px, 0px);
					transform: translate3d(0px, 0px, 0px);
					opacity:1!important;
					visibility:visible;
					-webkit-transition: opacity 0.2s ease-in-out 0.1s, visibility 0.2s ease-in-out, transform 0.2s ease-in-out 0.1s;
					transition: opacity 0.2s ease-in-out 0.1s, visibility 0.2s ease-in-out, transform 0.2s ease-in-out 0.1s;	
				}
		
				.classic-menu .flexnav .touch-button {
					display:none;
				}
				
		
				/*-- Full Screen Menu --*/	
				
				.fullscreen-menu .nav-height {
					overflow-y: scroll;
					position: relative;
					height: 100%;
					padding: 40px 0;
					padding-right: 30px;
					width: calc(100% + 30px);
					box-sizing: border-box;
				}
		
				.fullscreen-menu nav {
					height: 100vh;
					position: fixed;
					top:0;
					left:0;
					width: 100%;
					box-sizing: border-box;
					visibility: visible;
					pointer-events:none;
					opacity:0;
					padding:20px 0;
				}
		
				.fullscreen-menu nav.open {
					visibility:visible;
					pointer-events:initial;
				}

		
				.fullscreen-menu .flexnav {
					max-height: 2000px;
					-webkit-transition: all 0.2s ease-in 0.6s;
					transition: all 0.2s ease-in 0.6s;
					display: table;
					width: auto;
					padding:0 20px;
					box-sizing:border-box;
					margin: 0 auto;
					float: none;
				}
		
				.fullscreen-menu .flexnav.flexnav-show {
					-webkit-transition: all .3s ease-out 0.2s;
					transition: all .3s ease-out 0.2s;	
				}
		
				.fullscreen-menu .flexnav li {
					text-align:center;
					padding:0;
					box-sizing:border-box;
					float:none;			
				}
		
				.fullscreen-menu .menu-timeline {
					opacity:0;
				}
		
				.fullscreen-menu .flexnav li ul li .touch-button {
					height:32px;
				}
		
				.fullscreen-menu .flexnav:hover li ul li a.active, .fullscreen-menu .flexnav:hover li ul li:hover > a {
		            opacity:1;
		        }
		
				.fullscreen-menu .flexnav .touch-button .navicon {
					display:none;
				}
		
				.fullscreen-menu .flexnav li.link {
					border-bottom: none;	
				}
		
				.fullscreen-menu .flexnav > li > a {
					font-family: 'Six Caps', sans-serif;
					font-weight: 500;
					font-size: calc(1rem + 8vw);
		  			line-height: calc(1rem + 7.5vw);
					padding: 0 50px;
					-webkit-transition: all .1s ease-in-out 0s;
					transition: all .1s ease-in-out 0s;
					text-transform:lowercase;
				}
		
				.fullscreen-menu .flexnav .touch-button {
					width: 100%;
					display: block;
					height:calc(1rem + 7.5vw);
				}
		
				.fullscreen-menu .flexnav li a {
					color:#222;
				}
		
				.fullscreen-menu.invert-header .flexnav li a {
					color: #fff;
				}
		
				.fullscreen-menu .flexnav:hover li a, .fullscreen-menu .flexnav.hover li a {
					opacity:0.3;
				}
		
				.fullscreen-menu .flexnav li:hover a, .fullscreen-menu .flexnav li a.active{
					opacity:1;
				}
		
				.fullscreen-menu .flexnav:hover li ul li a {
					opacity:0.3;
				}
		
				.fullscreen-menu .flexnav:hover li ul li a.active, .fullscreen-menu .flexnav:hover li ul li:hover > a {
					opacity:1;
				}
		
				.fullscreen-menu .flexnav a.link::before {
					display:none;
				}
		
				.fullscreen-menu .flexnav li ul {
					margin-top:10px;
					margin-bottom:10px;
					position:relative;
					left:0;			
				}
		
				.fullscreen-menu .flexnav li ul:after {
					display:none;
				}
		
				.fullscreen-menu .flexnav li ul li a {
					padding: 3px 0;
					font-size: 16px;
					line-height: 26px;
					font-weight:500;
					border-top: none;
					text-transform:none;
				}
		
				.uppercase-text .fullscreen-menu .flexnav li ul li a {
					text-transform:uppercase;
					line-height:20px;				
				}
		
				.fullscreen-menu .flexnav ul li ul li a {
					background:transparent;
				}
		
				.fullscreen-menu .flexnav li ul li > ul, .fullscreen-menu .flexnav li ul.open ul.open {
					margin-left: 0;
					top: 0;
				}
		
				.fullscreen-menu .menu-timeline {
					opacity:1;
				}
		
				.fullscreen-menu .menu-timeline .before-span {
					opacity:0;
					display:block;
					-webkit-transform: translateY(120px);
					transform: translateY(120px);
				}
		
				.fullscreen-menu .flexnav li, .fullscreen-menu .flexnav li a  {
					background-color:transparent;
					border:0;
				}
		
				.fullscreen-menu .flexnav li a span {
					position: relative;
					display: block;
					-webkit-transition: -webkit-transform 0.2s;
					transition: transform 0.2s;
					transform-origin: 100% 0%;
					overflow:hidden;
				}
		
				.fullscreen-menu .open .flexnav li a span {
					overflow:visible;
				}
		
				.fullscreen-menu .flexnav li a span::before {
					position: absolute;
					top: 100%;
					width:100%;
					left:0;
					content: attr(data-hover);
				}
		
				.fullscreen-menu .flexnav li:hover a span {
					-webkit-transform: translateY(-100%);
					transform: translateY(-100%);
					transform-origin: 0% 0%;
				}
		
				.fullscreen-menu .flexnav li.hover a  span {
					-webkit-transform: translateY(-100%)!important;
					transform: translateY(-100%)!important;
					transform-origin: 0% 0%;
				}
	
			}

			nav, nav.open {
				background:transparent;
			}

			#burger-wrapper {
				width: 40px;
				height: 40px;
				float: right;
				top: 0px;
				right: 0;
				display: flex;
				position: relative;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				pointer-events: initial;
			}
	
			.classic-menu .button-wrap.right.menu {
				display:none;
			}

			.burger-dots #menu-burger {
				top:0px;
				width: 25px;
				height: 25px;
				position: relative;
				margin: 0 auto;		
				z-index:2;
				pointer-events: none;
			}
	
			.menu-overlay #menu-burger {
				display:block;
			}

			.burger-dots #menu-burger span {
			  display: block;
			  position: absolute;
			  height: 5px;
			  width: 5px;
			  border-radius:5px;
			  background-color: #000;
			  opacity: 1;
			  top:8px;
			  left:0;
			  -webkit-transform: rotate(0deg);
			  -moz-transform: rotate(0deg);
			  -o-transform: rotate(0deg);
			  transform: rotate(0deg);
			  -webkit-transition: background-color  0.05s ease-in-out,  transform  0.2s ease-in-out,  height  0.2s ease-in-out, width  0.2s ease-in-out, top 0.2s ease-in-out, left  0.2s ease-in-out;
			  transition: background-color  0.05s ease-in-out,  transform  0.2s ease-in-out,  height  0.2s ease-in-out, width  0.2s ease-in-out, top 0.2s ease-in-out, left  0.2s ease-in-out;
			}
	
			#burger-wrapper .touch-button {
				display:none;
			}

			.burger-dots #menu-burger span:nth-child(1) {
			  	left: 0px;
			}
	
			.burger-dots #menu-burger span:nth-child(2){
			  	left: 10px;
			}
	
			.burger-dots #menu-burger span:nth-child(3){
			  	left: 20px;
			}
	
			.button-wrap.right.menu.burger-dots .icon-wrap:hover #menu-burger span:nth-child(1) {
			  	left: 10px;
			}
	
			.button-wrap.right.menu.burger-dots .icon-wrap:hover #menu-burger span:nth-child(3) {
			  	left: 10px;
			}
	
			.button-wrap.right.menu.burger-dots .icon-wrap:hover #menu-burger.open span:nth-child(1) {
			  	left: 3px;
			}
	
			.button-wrap.right.menu.burger-dots .icon-wrap:hover #menu-burger.open span:nth-child(3) {
			  	left: 3px;
			}
	
			.burger-dots #menu-burger.open span:nth-child(1) {
			  -webkit-transform: rotate(45deg);
			  transform: rotate(45deg);
			  top:12px;
			  height: 2px;
			  width:20px;
			  left: 3px;
			}
	
			.burger-dots #menu-burger.open span:nth-child(2) {
			   -webkit-transform: scale(0);
			  transform: scale(0);
			}
	
			.burger-dots #menu-burger.open span:nth-child(3) {
			  -webkit-transform: rotate(-45deg);
			  transform: rotate(-45deg);
			  top:12px;
			  height: 2px;
			  width:20px;
			  left: 3px;
			}
	
			.button-wrap.right.burger-lines {
				right: -30px;
			}
	
			.burger-lines #menu-burger {
				width: 16px;
				height: 22px;
				position: relative;
				margin: 0 auto;		
				z-index:2;
				pointer-events: none;
			}
	
			.burger-lines #menu-burger span {
				display: block;
				position: absolute;
				height: 2px;
				width: 100%;
				opacity: 1;
				right: 0;
				background-color:#000;
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg);
				-webkit-transition: background-color  0.05s ease-in-out,  transform  0.2s ease-in-out,  top  0.2s ease-in-out;
				transition: background-color  0.05s ease-in-out,  transform  0.2s ease-in-out,  top  0.2s ease-in-out;
			}
	
			.burger-lines #menu-burger span:nth-child(1) {
			  top: 5px;
			}
	
			.burger-lines #menu-burger span:nth-child(2){
			  top: 13px;
			}
	
			.burger-lines #menu-burger span:nth-child(3){
				display:none;
			}
	
			.burger-lines #menu-burger.open span:nth-child(1) {
			  -webkit-transform: rotate(45deg);
			  -moz-transform: rotate(45deg);
			  -o-transform: rotate(45deg);
			  transform: rotate(45deg);
			  top:10px;
			}
	
			.burger-lines #menu-burger.open span:nth-child(2) {
			  -webkit-transform: rotate(-45deg);
			  -moz-transform: rotate(-45deg);
			  -o-transform: rotate(-45deg);
			  transform: rotate(-45deg);
			  top:10px;
			}
	
			.light-content #menu-burger span {
				background-color:#fff;
			}
	
			.white-header #menu-burger span {
				background-color:#fff;
			}
	
			.light-content .white-header #menu-burger span {
				background-color:#000;
			}
	
			.light-content .white-header.over-white-section #menu-burger span, .show-loader1 .light-content .white-header #menu-burger span {
				background-color:#fff;
			}
	
			.dark-content-header #menu-burger span {
				background-color:#000!important;
			}
	
			.light-content-header #menu-burger span {
				background-color:#fff!important;
			}
	
			.dark-content-header .button-text {
				color:#000!important;
			}
	
			.light-content-header .button-text {
				color:#fff!important;
			}
	
	
		/*--------------------------------------------------
			05. Main Content
		---------------------------------------------------*/		
	
			#content-scroll {
				z-index:1;
				position:relative;
			}
	
			.smooth-scroll #content-scroll {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index:1;		
				overflow:hidden; 
			}
	
			.scroll-content {
				cursor:default!important;
			}
	
			.scale-up .scroll-content {
				cursor:grabbing!important;
			}
	
			.scrollbar-track {
				background: transparent!important;
			}
	
	
		/*--------------------------------------------------
			06. Footer Elements
		---------------------------------------------------*/		
	
			#end.footer {
				position:relative;
				width:100%;
				height:120px;
				z-index:900;
				box-sizing:border-box;
				text-align:center;
				bottom:0;
				left:0;
				overflow:hidden;
				pointer-events:none;
			}
	
			footer.fixed {
				position:fixed;
			}
	
			footer.showcase-footer{
				position:fixed;
			}
	
			#footer-container {
				padding: 0 80px;
				margin: 20px auto;
				height: 80px;
				opacity: 0;
				position: absolute;
				width: 100%;
				box-sizing: border-box;
				bottom: 0;
				left: 0;
			}
	
			.footer-middle {
				position: absolute;
				margin: 0 auto;
				width: 100%;
				height: inherit;
				display: table;
				left: 0;
				pointer-events: none;;
			}
	
			.copyright {
				position: relative;
				top: 25px;
				width: auto;
				height: 30px;
				overflow: hidden;
				line-height: 30px;
				font-weight: 500;
				color: #000;
				pointer-events: initial;
				display: table;
				width: auto;
				padding: 0px 20px 0px 20px;
				max-width: 820px;
				box-sizing:border-box;
				text-align:center;
				margin: 0 auto;	
			}
	
			.light-content .copyright {
				color:#fff;
			}
	
			.socials-wrap {
				position:relative;
				float: right;
				color: #000;
				width: 240px;
				height: 160px;
				box-sizing: border-box;
				pointer-events:initial;	
				transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
			}
	
			.light-content .socials-wrap {
				color: #fff;
			}
	
			footer .socials-wrap {
				margin-top:0px;
			}
	
			.socials-wrap:hover {
				transform: translateY(-40px);
				-webkit-transform: translateY(-40px);
			}
	
			.socials-text {
				float:right;
				font-weight: 500;		
				line-height:40px;
				transform:translateY(20px);
			}
	
			.socials-wrap:hover .socials-text {
				transform: translateY(15px) translateX(5px);
				-webkit-transform: translateY(15px) translateX(5px);
				transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;		
			}
	
			.socials-icon {
				float:right;
				width:30px;
				height:40px;
				font-size:14px;
				line-height:40px;
				text-align:right;
				margin-left:10px;
				transform:scale(1) translateY(20px);
				transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
			}
	
			.socials-wrap:hover .socials-icon {
				transform:scale(0) translateY(40px);
				width:0;
				margin:0;
				overflow:hidden;
		
			}
	
			.socials-icon:after, .socials-text:after {
			  content: "";
			  clear: both;
			  display: table;
			}
	
			.socials {
				height: auto;
				line-height: 30px;
				position: relative;
				width: auto;
				margin:0 auto;
				margin-top: 10px;
				text-align: center;
				bottom: 0;
				display: table;
				transform: translateX(15px);
				-webkit-transform: translateX(15px);
			}
	
			.socials-wrap .socials {
				display: inline-block;
				width: 100%;
				text-align: right;
			}
	
			.socials li {
				margin-right: 0px;
				margin-left: 10px;
				list-style: none;
				color: #999;
				font-size: 15px;
				margin-bottom: 0;
				line-height: 40px;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 40px;
				width: 40px;
				float: right;
				z-index: 2;
				-webkit-transition: background 0.4s ease-in-out 0s;
				transition: background 0.4s ease-in-out 0s;
			}
	
			.socials-wrap .socials li {
				opacity:0;
				transform: translateY(20px);
				-webkit-transform: translateY(20px);
				transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
			}
	
			.socials-wrap:hover .socials li:nth-child(5) {
				transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.05s;
				opacity:1;
				transform: translateY(10px);
				-webkit-transform: translateY(10px);		
			}
	
			.socials-wrap:hover .socials li:nth-child(4) {
				transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s;
				opacity:1;
				transform: translateY(10px);
				-webkit-transform: translateY(10px);	
			}
	
			.socials-wrap:hover .socials li:nth-child(3) {
				transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.15s;
				opacity:1;
				transform: translateY(10px);
				-webkit-transform: translateY(10px);		
			}
	
			.socials-wrap:hover .socials li:nth-child(2) {
				transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.2s;
				opacity:1;
				transform: translateY(10px);
				-webkit-transform: translateY(10px);	
			}
	
			.socials-wrap:hover .socials li:nth-child(1) {
				transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
				opacity:1;
				transform: translateY(10px);
				-webkit-transform: translateY(10px);		
			}
		
			.socials li:last-child {
				margin-left: 0px;
			}
	
			.socials li a {
				color: #000;		
				font-size:14px;
				font-weight: 500;
				display: block;
				height: 40px;
				width: 40px;		
				line-height:40px;
				text-align:center;
				-webkit-transition: opacity 0.2s ease-in-out;
				transition: opacity 0.2s ease-in-out;
			}
	
			.socials:hover li  a {
				opacity:0.3;
			}
	
			.socials li a:hover {
				color: #000;
				opacity:1;
			}
	
			.light-content .socials li a {
				color: #fff;	
			}
	
			.light-content .socials:hover li  a {
				opacity:0.3;
			}
	
			.light-content .socials li a:hover {
				color: #fff;
				opacity:1;
			}
	
			.button-wrap {
				position: relative;
				cursor: pointer;
				top: 0px;
				pointer-events: initial;
				width: auto;
				display: table;
			}
	
			.button-wrap:after {
				clear: both;
				content: " ";
				display: block;
				height: 0;
				visibility: hidden;
			}
	
			.button-wrap.left {
				float:left;
				left:-32px;	
			}
	
			.button-wrap.right {
				float:right;
				right:-26px;	
			}
	
			#main .button-wrap.left {
				float:none;
				left:-24px;		
			}
	
			#main .button-wrap.button-link.left {
				float:none;
				left:-20px;		
			}
	
			#main .button-wrap.right {
				float:none;
				right:auto;			
			}
	
			#main .button-wrap.button-link.right {
				right:-2px;		
			}
	
			.icon-wrap {
				width: 80px;
				height: 80px;
				display: flex;
				position: relative;
				justify-content: center;
				align-items: center;
				float:left;
			}
	
			#main .icon-wrap {
				width: 60px;
				height: 60px;
			}
	
			.button-wrap.left .icon-wrap {
				float:left;
			}
	
			.button-wrap.right .icon-wrap {
				float:right;
			}
	
			#main  .text-align-right .button-wrap.right {
				float:right;
			}
	
			.button-icon {
				height: 40px;
				width: 40px;
				color: #000;
				text-align: center;
				line-height: 40px;
				font-size: 18px;
			}
	
			.button-icon i.fa-solid.fa-sort {
				font-size: 14px;
				line-height: 38px;
			}
	
			.light-content .button-icon, .dark-section .button-icon {
				color:#fff;
			}
	
			.light-content .light-section .button-icon {
				color:#000;
			}
	
			.white-header .button-icon {
				color:#fff;		
			}
	
			.light-content .white-header .button-icon {
				color:#000;		
			}
	
			.button-icon i {
				height:40px;
				line-height:40px;
				width:40px;
				text-align:center;
			}
	
			#main .button-icon i {
				line-height:40px;
			}
	
			#main .button-icon i.fa.fa-arrow-right {
				font-size:14px;
			}
	
			.button-text {
				font-weight: 500;
				line-height:30px;
				margin:25px 0;
				overflow: hidden;
				width:auto;
				padding:0 10px;
				color:#000;
				-webkit-transition: color 0.05s ease-in-out;
				transition: color 0.05s ease-in-out;
			}
	
			#main #hero-footer .button-text span::after {
				content:none;
			}
	
			#main .button-text {
				font-size: 18px;
				line-height:30px;
				font-weight: 500;
				margin:15px 0;
				transition: transform .2s ease-out;
			}
	
			#main #hero #hero-footer .button-text {
				font-size: 14px;
				line-height:30px;
			}
	
			#main .large-btn .button-text {
				font-size: 20px!important;
				font-weight:500;
				margin:15px 0;
				transition: transform .2s ease-out;
			}
	
			.light-content .button-text, .dark-section .button-text {
				color:#fff;
			}
	
			.light-content .light-section .button-text {
				color:#000;
			}
	
			.white-header .button-text {
				color:#fff;		
			}
	
			.light-content .white-header .button-text {
				color:#000;		
			}
	
			.light-content .white-header.over-white-section .button-text, .show-loader1 .light-content .white-header .button-text {
				color:#fff;		
			}
	
			.button-wrap.left a {
				text-align:left;
				float: left;
			}
	
			.button-wrap.right a {
				text-align:right;
				float: right;
			}
	
			.button-wrap.right .button-text {
				padding-left:0px;
			}
	
			.button-text span {
				position: relative;
				display: inline-block;
				-webkit-transition: -webkit-transform 0.2s;
				transition: transform 0.2s;
				width:auto;
				text-align:center;
				transform-origin: 100% 0%;
			}
	
			.button-link .button-text, #main .button-link .button-text {
				overflow:visible;
				transition: padding 0.3s ease-out;
			}
	
			.button-link.left .button-text {
				padding-left:0px;
			}
	
			.button-link.left:hover .button-text {
				padding-left:10px;
			}
	
			.button-link .button-text span::before {
				content: '';
				position: absolute;
				bottom: 1px;
				left: 0;
				width: 100%;
				height: 1px;
				background: transparent;
				transform: scaleX(1);
				transform-origin: right;
				transition: transform 0.3s ease-out;
			}
	
			.button-link.left .button-text span::before {
				transform-origin: left;
			}
	
			.light-content .button-link .button-text span::before, .dark-section .button-link .button-text span::before {
				background: transparent;
			}
	
			.light-content .light-section .button-link .button-text span::before {
				background: transparent;
			}
  
		    .button-wrap.button-link:hover .button-text span {
				transform: translateY(0);
				-webkit-transform: translateY(0);
			}
	
			.button-link:hover .button-text span::before {
				transform: scaleX(0);
				-webkit-transform: scaleX(0);
				transform-origin: left;
			}
	
			.button-link.left:hover .button-text span::before {
				transform-origin: right;
			}
	
			.button-link .button-icon i {
				background-color:#000;
				border:1px solid rgba(0,0,0,1);
				color:transparent;
				font-size: 14px;
				border-radius:100%;
				transform: scale(0.2);
				box-sizing:border-box;
				transition: all .3s ease-out;
				text-indent:-100px;
				overflow:hidden;
				opacity:1;
			}
	
			.button-link:hover .button-icon i {
				background-color:#000;
				color:#fff;
				border:1px solid rgba(0,0,0,1);
				transform: scale(1.2);
				text-indent:0px;
				opacity:1;
			}
	
			.light-content .button-link .button-icon i, .dark-section .button-link .button-icon i {
				background-color:#fff;
				border:1px solid rgba(255,255,255,1);
			}
	
			.light-content .button-link:hover .button-icon i, .dark-section .button-link:hover .button-icon i {
				background-color:#fff;
				color:#000;
				border:1px solid rgba(255,255,255,1);
				opacity:1;
			}
	
			.light-content .light-section .button-link .button-icon i {
				border:1px solid rgba(0,0,0,1);
			}
	
			.light-content .light-section .button-link:hover .button-icon i {
				background-color:#000;
				color:#fff;
				border:1px solid rgba(0,0,0,1);
				opacity:1;
			}
	
	
			.button-link.right .button-icon i {
				transform: scale(0.2) translateX(-60px);
				-webkit-transform: scale(0.2) translateX(-60px);
			}
	
			.button-link.right:hover .button-icon i {
				transform: scale(1.2) translateX(0px);
				-webkit-transform: scale(1.2) translateX(0px);
			}
	
			.button-wrap.left .button-text span {
				text-align:left;
			}
	
			.button-wrap.right .button-text span {
				text-align:right;
			}
	
			.button-text span::before {
				position: absolute;
				width:auto;
				top: 100%;
				left:0;
				content: attr(data-hover);
			}
	
			.header-middle .button-text span::before {
				content: attr(data-on);
			}
	
			.button-wrap:hover .button-text span {
				-webkit-transform: translateY(-100%);
				transform: translateY(-100%);
				transform-origin: 0% 0%;
			}
	
			.link-text {
				font-weight: 500;
				font-size: 14px;
				line-height:30px;
				margin:0;
				overflow: hidden;
				display: table;
				width:auto;
				padding:0;
				color:#000;
				-webkit-transition: color 0.05s ease-in-out;
				transition: color 0.05s ease-in-out;
			}
	
			footer .link-text {
				float:left;
				opacity:0;
				margin-top: 25px;
			}
	
			p .link-text {
				display:inline-table;
				font-size:16px;
			}
	
			.light-content .link-text, .dark-section .link-text {
				color:#fff;
			}
	
			.light-content .light-section .link-text {
				color:#000;
			}
	
			.link-text span {
				position: relative;
				display: inline-block;
				-webkit-transition: -webkit-transform 0.2s;
				transition: transform 0.2s;
				width:auto;
				text-align:center;
				transform-origin: 100% 0%;
				pointer-events:initial;
				cursor:pointer;
			}
	
			.link-text span::before {
				position: absolute;
				width:auto;
				top: 100%;
				left:0;
				content: attr(data-hover);
			}
	
			.link-text:hover span {
				-webkit-transform: translateY(-100%);
				transform: translateY(-100%);
				transform-origin: 0% 0%;
			}
	
			nav, nav.open {
				background:transparent;
			}


		/* HOME PAGE ----- */
		#hero-caption.height-title {
		    height: 74.3vh !important; /* set height of hero title area */
		    padding-top:8.8rem;
		    padding-bottom:80px; 
	    }
		.new-section-padded-top {
			padding-top: 6vw;
		}
		.wheat-background .light-section-wrapper {
		   background-color: #dfe0d5;
		}
         

        .accordion-container .panel-grid:nth-child(even),
		.collage .tile:nth-child(even), 
		.gallery-hk .tile-hk:nth-child(even){ background-color: #fcfcfc; }
        
		.sequence-images .img-wrapper {
			background-color: #b6b7a7; 
        }
        #third-to-load .accordion-container .panel-grid img,
		.loaded-section .accordion-container .panel-grid img,
		.loaded-section .tile img,
		.loaded-section .tile-hk img {
			    opacity: 0;
				transform: translateX(-40px);
                will-change: transform, opacity;
                animation: slideInleftRight 0.6s ease-out forwards;
		}
		img.anime {
			    opacity: 0;
				transform: translateX(-40px);
		}		
        /* Stagger each grid item by 0.2s */
		
		#third-to-load .accordion-container .panel-grid img {
             animation-delay: calc(1s + 0.3s * var(--i));
        }
		.loaded-section .accordion-container .panel-grid img,
		.loaded-section .tile img,
		.loaded-section .tile-hk img {
             animation-delay: calc(2.5s + 0.3s * var(--i));
        }
		.anime-load .img-wrapper img.anime { 
			/* animation-delay: 2s; */
			animation: slideInleftRight 0.6s ease-out 1.5s forwards;
        }


@keyframes slideInleftRight {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

        /* * ACCORDION CONTAINER STYLES 
        */
        .accordion-container {
            display: flex;
            /* height: 60vh; */ /* Set height for a hero section look */
			height: 100%; 
            overflow: hidden; /* overflow-hidden */
			min-height: 0; /* Prevents overflow issues in flex container */
			background: #d9dad0; 
        }
		.accordion-container .panel-overlay span,
		.accordion-container .panel-overlay .capt p {
		   font-size: calc(1rem + 0.05vw);
           line-height: calc(1rem + 1.6vw);
           letter-spacing: 1px;
           font-weight: bold; 
		}	
        .accordion-container.four-collumns.squared, 
        .accordion-container.five-collumns.squared {
			height: 100%;
            flex-wrap: wrap;
		}
		.accordion-container.potrait-thin-grid .panel-grid.potrait-thin {
            height: 60vh; /* Set height for a hero section look */
		} 
		.accordion-container.potrait-thin-tall-grid .panel-grid.potrait-thin {
            height: 80vh; /* Set height for a hero section look */
		}		 	
		.accordion-container.four-collumns.squared .panel-grid.square {
			height: 40vh;
            flex: 1 0 25%; 
		}
		.accordion-container.five-collumns.squared .panel-grid.square {
			height: 32vh;
            flex: 1 0 20%; 
		}		
        /* * PANEL STYLES (FLEX ITEMS)
        */
        .panel-grid {
            /* 1. FLEX PROPERTIES */
            flex: 1; /* Initial flex ratio (flex: 1) */
            -webkit-transition: flex 0.8s cubic-bezier(0.4, 0, 0.2, 1);
			transition: flex 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Transition on 'flex' for smooth width change */
            
			overflow: hidden; 
            
            /* 2. BACKGROUND/IMAGE PROPERTIES */
            background-size: cover;
            background-position: center;
            
            /* Optional: Add a smooth brightness effect on hover for contrast */
            filter: brightness(0.8);
			-webkit-transition: flex 0.9s ease-in-out, filter 0.6s ease-in-out;
            transition: flex 0.9s ease-in-out, filter 0.6s ease-in-out; 
        		
		} 
        .panel-grid:hover {
            filter: brightness(1); /* Full brightness on hover */
        }
        /* 3. HOVER EFFECT: For Wide Images Apply the growth factor on hover */
        .panel-grid.square:hover
		.panel-grid.potrait-thin:hover {
            flex: 1.1; /* flex: 7 - Grows the width only */
        }

        /* 4. HOVER EFFECT: For Wide Images Apply the growth factor on hover */
        .panel-grid.wide:hover {
            flex: 7; /* flex: 7 - Grows the width only */
        }

        /* * CONTENT OVERLAY STYLES 
        */
        .panel-overlay {
			position: relative; 
            display: flex;
            align-items: center;
            flex-direction: column;
            height: 100%;
            justify-content: flex-end;
            font-size: 1.5rem;
            font-family: 'SchnyderL-Light', sans-serif;
            color: #fff; 
			background-color: rgba(0, 0, 0, 0.4); /* bg-black bg-opacity-40 */            
			padding: 15px 15px 50rem 15px;
            opacity: 0;
            transition: opacity 0.5s ease 0.3s; 
            white-space: nowrap;
			margin-top: -3rem;
        }
        .panel-grid img {
			    height: 100%;
                width: auto;
                object-fit: cover;
    position: absolute;
    display: flex;
    flex-direction: column;
		} 
		.panel-grid.full-width img,
		.panel-grid.square img {
          width: 100%;
		}
        /* Show content when panel is hovered */
        .panel-grid:hover .panel-overlay {
            opacity: 1;
        }
        .panel-overlay h4 {
			margin-bottom: 0px !important; 
		}
		/* Responsive Styles */
		@media only screen and (max-width: 1024px) {
			.extra-padded-sides-journal-detailed,
			.extra-padded-sides-journal {
				max-width: 50%; 
			}
            .accordion-container.five-collumns {
                display: grid; 
                grid-template-columns: repeat(2, 1fr); /* First 2 rows: 2 columns */
                height: auto; /* override the fixed accordion height */
            }
            .panel-overlay {
		        justify-content: unset;
		    } 	
		    /* The 5th item becomes a full-width row */
		    .accordion-container.five-collumns .panel-grid:nth-child(5),
			.accordion-container.five-collumns .panel-grid:nth-child(10) { 
		        grid-column: 1 / -1; /* spans both columns */
		    }
		    /* Disable accordion hover effects (optional) */
		    .panel-grid {
                flex: none !important; /* Stop flex behavior */
                transition: none !important;
            }
           .panel-grid:hover {
                flex: none !important; /* No expansion on hover */
            }
		   .accordion-container.four-collumns.squared .panel-grid.square {
			    flex: 1 0 50% !important;
		   }	
           /* Adjust overlay (your desktop values were very tall) */
            .panel-overlay {
               opacity: 1; /* always visible on mobile */
               background-color: rgba(0,0,0,0.35);
		       height: 100%;
               width: 100%;
               /* position: relative;  */
			   margin: 0px !important;
            } 
            .panel-overlay h4,
		    .panel-overlay span,
			.panel-overlay .capt {
               position: absolute;
               left: 20px;
               right: 20px;
               display: flex;
               flex-direction: column;
               text-align: center;
			   margin: auto !important;
		    }
            .panel-overlay h4{
               bottom: 5rem;
		    }		   
            .panel-overlay span,
			.panel-overlay .capt{
			   font-size: 1rem;
               font-weight: bold;
		    } 
            .panel-overlay span{
               bottom: 3rem;
		    } 			
			.panel-overlay .capt{
               bottom: 1rem;
		    }  			
		}
        /** end responsive 5 collumn grid **/


	.image-grid-css {
		  width: 100%; 
		  display: flex;
		  justify-content: center; 
		  gap: 0px;
		}
		.image-grid-css.potrait {
		  height: 720px; 
		}
		.image-grid-css.square {
		  height: 350px; 
		}
		.image-grid-css > div.one_fourth_col {
		  flex: 0 0 25%;
		}
		.image-grid-css > div.one_fifth_col {
		  flex: 0 0 20%;
		}
		.panels .image-grid-css > div.one_fourth_col, 
		.panels .image-grid-css > div.one_fifth_col {
		  flex: none !important; 
		}
		.panels .image-grid-css.potrait {
		    height: 720px !important; 
		}

		.image-grid-css > div.one_fifth_col,
		.image-grid-css > div.one_fourth_col {
		  border-radius: 0;
		  transition: 0.5s ease-in-out;
		  cursor: pointer;
		  position: relative;
		  overflow: hidden;
		}
		.image-grid-css > div.one_fourth_col:hover {
		  flex: 0 0 25%;
		}
		.image-grid-css > div.one_fifth_col:hover {
		  flex: 0 0 25%;
		}
		.panels .image-grid-css > div.one_fifth_col:hover {
		    flex: 0 0 12%;
		}
		.image-grid-css > div.one_fourth_col:hover,
		.image-grid-css > div.one_fifth_col:hover {
		  transform: translatey(0px);
		}
		.image-grid-css > div.one_fourth_col .caption-wrap, 
		.image-grid-css > div.one_fifth_col .caption-wrap {
		  font-size: 1.5rem;
		  font-family: 'SchnyderL-Light', sans-serif; 
		  color: #fff;
		  display: flex;
		  align-items: center;
		  padding: 15px 15px 50rem 15px; 
		  opacity: 0;
		  flex-direction: column;
		  height: 100%;
		  justify-content: flex-end;
		  background: #02022e;
		  background: linear-gradient(0deg, rgb(48 48 48 / 68%) 0%, rgba(255, 255, 255, 0) 100%);
		  transform: translatey(100%);
		  transition: opacity 1s ease-in-out, transform 0.5s 0.3s;
		  visibility: hidden;
		  width: 100%; 
		}
		.image-grid-css > div.one_fourth_col .caption-wrap span,
		.image-grid-css > div.one_fifth_col .caption-wrap span {
		  display: block;
		  margin-top: 5px;
		  font-size: 1.2rem;
		  letter-spacing: 2px;
		  font-weight: bold; 
		}
		.image-grid-css > div.one_fourth_col:hover .caption-wrap, 
		.image-grid-css > div.one_fifth_col:hover .caption-wrap {
		  opacity: 1;
		  transform: translatey(-5%);
		  visibility: visible;
		}
		.centered-paragraph p {
		  margin-bottom: 1rem; 
		}
		/* Responsive for smaller screens */
		@media (max-width: 1200px) {
		   .image-grid-css {
		      flex-wrap: wrap;
		   }
		   .image-grid-css.potrait {
		      height: 720px; 
		    }
		   .image-grid-css.square {
		       height: 700px; 
		    }
		   .image-grid-css.square div.one_fifth_col {
		       flex: 0 0 33.33%;
		       height: 350px; 
		    }
			.image-grid-css.square div.one_fifth_col:nth-child(4),
		    .image-grid-css.square div.one_fifth_col:nth-child(5) {
			   flex: 0 0 50%; 
			}	
		}
		@media (max-width: 800px) {
		   .image-grid-css {
		      flex-wrap: wrap;
		   }
		   .image-grid-css.potrait {
		      height: 720px; 
		    }
		   .image-grid-css.square {
		       height: 700px; 
		    }
		   .image-grid-css.square div.one_fifth_col {
		       flex: 0 0 33.33%;
		       height: 350px; 
		    }
			.image-grid-css.square div.one_fifth_col:nth-child(4),
		    .image-grid-css.square div.one_fifth_col:nth-child(5) {
			   flex: 0 0 50%; 
			}	
		}

		.gallery_grid,
		.gallery_grid_five {
		  display: grid;
		  gap: 0px;
		}

		/* Large desktop: 5 equal columns in one row */
		.gallery_grid_five { grid-template-columns: repeat(5, 1fr); }
		.gallery_grid_five > .one_col { grid-column: span 1; 
		    width: 100%;
		    margin: 0px;
		}

		/* Image fit */
		.gallery_grid_five img {
		  width: 100%;
		  height: 100%;
		  object-fit: cover;         /* crop nicely */
  
		}
		/* Smaller desktop / iPad: 3 on first row, 2 on second row */
		@media (min-width: 768px) and (max-width: 1199px) {
		  .gallery_grid_five {
		    /* 6 tracks lets us make 3 items (2 tracks each) and then 2 items (3 tracks each) */
		    grid-template-columns: repeat(6, 1fr);
		  }
		  .gallery_grid_five > .one_col { grid-column: span 2; }         /* first 3 become 3× columns */
		  .gallery_grid_five > .one_col:nth-child(n+4) { grid-column: span 3; } /* last 2 become halves */
		}


		/**** Craftsmaship ****/

		.potrait-photo {
		    padding-top: 7rem;
			padding-bottom: 3vw;
			max-height: 500px; 
		}
		.img-wrapper {
			display: inline-block;
		}
		.potrait-photo .img-wrapper {
		    min-height: 50.7vh;
		}	
		.ceodetails {
		    font-size: 1.2rem;
		}
		.ceotitle {
			padding-top: 1vw;
		    display: block;
		}

		/** end Craftsmaship ***/

		/** Unforgetable HK ***/
		/* ==== Hong Kong Gallery (3-col justified collage) ==== */
		.gallery-hk {
		  /* --row: min(22vw, 240px);  */   /* base row height (responsive) */
		  display: grid;
		  grid-template-columns: repeat(3, 1fr);
		  grid-template-rows: repeat(4, var(--row));
		  gap: 0;
		  grid-template-areas:
		    /* row 1 */ "a b c"
		    /* row 2 */ "d e f"
		    /* row 3 */ "d e g"
		    /* row 4 */ "h i g";
		}

		/* The 9 tiles (keep this order) */
		.gallery-hk > .tile-hk:nth-child(1) { grid-area: a; } /* street */
		.gallery-hk > .tile-hk:nth-child(2) { grid-area: b; } /* boat */
		.gallery-hk > .tile-hk:nth-child(3) { grid-area: c; } /* bridge */
		.gallery-hk > .tile-hk:nth-child(4) { grid-area: d; } /* buddha (tall) */
		.gallery-hk > .tile-hk:nth-child(5) { grid-area: e; } /* posters (tall) */
		.gallery-hk > .tile-hk:nth-child(6) { grid-area: f; } /* skyline */
		.gallery-hk > .tile-hk:nth-child(7) { grid-area: g; } /* stairs (tall) */
		.gallery-hk > .tile-hk:nth-child(8) { grid-area: h; } /* rainbow building */
		.gallery-hk > .tile-hk:nth-child(9) { grid-area: i; } /* harbor sunset */

		/* Make images fill their cells cleanly */
		.gallery-hk .tile-hk {
		  position: relative;
		  overflow: hidden;
		  margin: 0px;
		}
		.gallery-hk .tile-hk img {
		  width: 100%;
		  height: 100%;
		  object-fit: cover;
		  display: block;
		}

		/* ===== Responsive ===== */
		@media (max-width: 1000px) {
		  .gallery-hk {
		    --row: min(30vw, 240px);
		    grid-template-columns: repeat(2, 1fr);
		    grid-template-rows: repeat(7, var(--row));
		    grid-template-areas:
		      "a b"
		      "d e"
		      "d f"
		      "h g"
		      "i g"
		      "c c"
		      "e e";
		  }
		}

		@media (max-width: 580px) {
		  .gallery-hk {
		    --row: 52vw;                /* taller rows on phones */
		    grid-template-columns: 1fr;
		    grid-template-rows: repeat(12, var(--row));
		    grid-template-areas:
		      "a"
		      "b"
		      "c"
		      "d"
		      "d"
		      "e"
		      "e"
		      "f"
		      "g"
		      "g"
		      "h"
		      "i";
		  }
		}

		/** end Unforgetable HK ***/


		/* end HOME PAGE */

        /* TALENT PAGE */

		.hero-text-padded-top {
			padding-top: 10rem;
		}
		.talent-hero-photo {

		}
        /* End TALENT PAGE */
		/* BOUTIQUE PAGE */
        li.shop-details .centered-subtitle { 
           padding: 1rem 0;
		}
		/* ERROR PAGE */
        .page-error .hero-subtitle {
           padding-right: 4rem;
		   padding-left: 4rem; 
		}
        .page-error .hero-subtitle a {
           text-decoration:underline !important;  
		}	
		/* JOURNALS PAGES */
		.extra-padded-sides-journal {
           padding-left: 1%;
           padding-right: 1%;
           max-width: 30%;
           margin-left: auto;
           margin-right: auto;
		}
		.extra-padded-sides-journal-detailed {
           padding-left: 1%;
           padding-right: 1%;
           max-width: 43%;
           margin-left: auto;
           margin-right: auto;			
		}
		.read-more {
          padding-top: 1vw; 
          font-size: 1rem;
          text-decoration: underline;
		}	
		.j-title {
          padding-top: 1vw; 
		}	
		.image-two-col,
		.j-pager {
          display: flex;
          flex-wrap: wrap;
		  justify-content: center;
		}	
        .item {
            width: 48%;
            box-sizing: border-box;
            display: block;
        }
        .item.full-width {
           width: 100%; 
		   box-sizing: border-box;
        }
		.j-captions {
           padding: 1rem 0;
		}
		.j-pager {
           justify-content: center;
           flex-direction: row; 
		   gap: 0px 25px;
		   width: 100%;  
        }
		.j-pager .prev,
		.j-pager .next {
           width: 45%;
		}
		.j-pager .prev { 
           text-align: right;
		}
		.j-pager .next {
           text-align: left;
		}		
		.j-pager .prev a {
           color: #86877f;
		}
		.j-pager span {

		}
		.j-pager .prev a:hover,
		.j-pager .next a:hover {
           color: #000;
		}	
		/** Interchangables - Metamorphic **/ 
/* --------------------------- */
/* PINNED LEFT IMAGE SLIDER    */
/* --------------------------- */
.vslide-section {
  width: 100%;
  height: 100vh;
  position: relative;
}
.vslide-inner {
  display: flex;
  width: 100%;
  height: 100%;
}
/* LEFT COLUMN */
.vslide-left {
  flex: 1;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.slide-img-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.vslide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* RIGHT COLUMN FIXED/STICKY */
.vslide-right.sticky {
  flex: 1;
  height: 100%;
  position: sticky;
  top: 0;
  padding: 80px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: white;
}	 
		/** New Footer */
		.footer-svgn {
		  background-color: #e8e8de; /* make it clearly stand out */
		  color: #000;
		  padding: 60px 60px 40px;
		  margin-top: 8rem;
		}

		.footer-inner {
		  display: grid;
		  grid-template-columns: 2fr 2fr 1.2fr 2fr;
		  gap: 60px;
		  border-bottom: 1px solid transparent;
		}

		.footer-col {
		  display: flex;
		  flex-direction: column;
		  gap: 20px;
		}

		.footer-col h3 {
		  font-size: 1rem;
		  font-weight: 500;
		  text-decoration: underline;
		  margin-bottom: 10px;
		}

		.footer-col ul {
		  list-style: none;
		  margin: 0;
		  padding: 0;
		}

		.footer-col ul li {
		  margin: 4px 0;
		}

		.footer-col a {
		  color: #000;
		  text-decoration: none;
		}

		.footer-col a:hover {
		  text-decoration: underline;
		}

		/* Newsletter form */

		.newsletter p {
		  font-size: 0.95rem;
		  margin-bottom: 12px;
		}

		.newsletter-form {
			display:flex;
			flex-direction: row;
			flex-wrap: nowrap;
		}
		
		.newsletter-form input.email {
		  width: 100%;
		  padding: 10px;
		  border: 1px solid #000;
		  outline: none;
		  font-size: 0.9rem;
		}
	    .newsletter-form .input-wrapper {
            position: relative;
            display: inline-block;
	        width: 80%; 
        }		
		.newsletter-form .btn {
		    background-color: transparent;
		    width: 20%;
			color: #000;
			padding: 0px;
			border: 1px solid #000;
			border-left: 0px;
			outline: none; 
        }
		.newsletter-form .btn.outline input.send_message {
		    padding: 0px !important;
			font-size: 0.9rem;
		} 	
		.newsletter-form .btn.outline:hover {
		    background-color: #000;
			color: #dfe0d5; 
        }		
		.newsletter-form .btn.outline:hover input[type="submit"] {
			color: #dfe0d5 !important; 
	    }
		    /* Visual feedback */
    .success {
      border-color: #28a745 !important;
      box-shadow: 0 0 6px rgba(40, 167, 69, 0.5);
	  background: #000;
      color: #e8e8de;
    }

@keyframes fadeInMsg {
  from { opacity: 0; transform: translate(-50%, -60%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* When success class is added to wrapper */
.input-wrapper.success::before {
 animation: fadeInMsg 0.3s ease forwards;	
  content: 'Email Received :)';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background:rgba(0,0,0,0);
  color: #e8e8de;;
  font-weight: 600;
  pointer-events: none;
  font-size: 0.9rem; 
}
    .failed {
      border-color: #dc3545 !important;
      box-shadow: 0 0 6px rgba(220, 53, 69, 0.5);
    }


		/* Footer bottom section */
		.footer-bottom {
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		  margin-top: 40px;
		}
        
		.smallest-text,
		.footer-bottom p {
		  font-size: 1rem;
		}

		.footer-bottom a {
		  color: #000;
		  text-decoration: underline;
		}

		.footer-logo {
		  width: 70px;
		  height: auto;
		}
		
		/* Responsive */
		@media (max-width: 900px) {
		  .footer-inner {
		    grid-template-columns: repeat(2, 1fr);
		    gap: 40px;
		  }

		  .footer-bottom {
		    flex-direction: column;
		    gap: 20px;
		  }
		}

		@media (max-width: 600px) {
		  .footer-inner {
		    grid-template-columns: 1fr;
		  }

		  .footer-svgn {
		    padding: 40px 20px;
		  }
		}
		/** end new Footer */

		/*--------------------------------------------------
			07. Responsive
		---------------------------------------------------*/			

			
		@media only screen and (max-width: 1466px) {
	
			.row_padding_all {
				padding-left: 60px;
				padding-right: 60px;
			}
	
			.row_padding_left {
				padding-left:60px;
			}
	
			.row_padding_right {
				padding-right:60px;
			}
	
			.percentage-wrapper {
				width:10vw;
			}
	
			.percentage-intro {
		  		bottom: 50px;
			}
	
			header {
		    	height: 100px;
			}
	
			#header-container {
				padding: 0px 60px;
			}
	
			.flexnav li {
		    	padding: 20px;
			}
	
			#end.footer {
		    	height: 100px;
			}
	
			#footer-container {
		    	padding: 0 60px;
				margin: 10px auto;
			}
	
			.socials-wrap:hover .socials-text {
				transform: translateY(20px) translateX(5px);
				-webkit-transform: translateY(20px) translateX(5px);		
			}
	
		}
		@media only screen and (min-width: 1024px) {
			header.classic-menu .inner {
		       display: flex !important;
			} 
		} 
		@media only screen and (max-width: 1024px) {
			.centered-subtitle.padded-text {
				width: 100%; 
			}
			.parallax-wrap {
				transform:none!important;
			}
	
			.parallax-element {
				transform:none!important;
			}
	
			.has-parallax figcaption {
				display:none;
			}
	
			.destroy {
				display:none;
			}
	
			.row_padding_left {
				padding-left: 0px;
			}
	
			.row_padding_right {
				padding-right: 0px;
			}
	
			.full.row_padding_left {
				padding-left: 40px;
			}
	
			.full.row_padding_right {
				padding-right: 40px;
			}
	
			.row_padding_all {
				padding-top: 4vw;
				padding-bottom: 4vw;
				padding-left: 0px;
				padding-right: 0px;
			}
	
			.full.row_padding_all {
				padding-top: 4vw;
				padding-bottom: 4vw;
				padding-left: 40px;
				padding-right: 40px;
			}
	
			.big-title {
				font-size: calc(1rem + 12vw);
				line-height: calc(1rem + 11.5vw);
			}	
	
			#magic-cursor {
				display:none;
			}
	
			.percentage-wrapper {
				width:12vw;
			}
	
			.percentage-intro {
		  		bottom: 40px;
			}

	
			#header-container {
				padding: 0px 40px;
			}
	
			nav {
				height: 100vh;
				width: 100%;
				position: fixed;
				left: 0;
		    	top: 0;		
				box-sizing: border-box;
				visibility: visible;
				pointer-events:none;
				opacity:0;
				padding:20px 0;	
			}
	
			nav.open {
				visibility:visible;
				pointer-events:initial;
				height: 100vh !important;
			}
	
			.nav-height {
				position: relative;
				height: 100%;
				padding: 40px 0;
				width: 100%;
				box-sizing: border-box;
				overflow-y: auto;
			}
	
			.flexnav {
				padding: 0 20px;
		    	max-height: 2000px;
				display: table;
				width: auto;
				margin: 0 auto;
				text-align:center;
				box-sizing:border-box;
				background: transparent;
				-webkit-transition: all 0.2s ease-in 0.6s;
				transition: all 0.2s ease-in 0.6s;
			}
	
			.flexnav.flexnav-show {
				-webkit-transition: all .3s ease-out 0.2s;
				transition: all .3s ease-out 0.2s;	
			}
	
			.flexnav.opacity {
				opacity: 1;
			}
	
			.flexnav li {
				padding:0;
				-webkit-transition: color .15s ease-out 0s;
				transition: color .15s ease-out 0s;	
				margin-bottom: 1rem; 
			}
	
			.flexnav:hover li  {
				color:rgba(255,255,255,0.4)
			}
	
			.flexnav li:hover {
				color:rgba(255,255,255,1)
			}
	
			.flexnav li a, .flexnav li ul li a {
		    	background: transparent;
			}
	
			.flexnav li a {
				font-weight:500;
				font-size: 9vw;
				line-height: 10vw;
				padding:0;
				border:none;
				-webkit-transition: all .1s ease-in-out 0s;
				transition: all .1s ease-in-out 0s;
			}
	
			.flexnav > li > a {
				font-size: calc(1rem + 4vw);
                line-height: calc(1rem + 4.5vw);	
			}
	
			.flexnav > li > .touch-button {
				width: 100%;		
				height:calc(1rem + 11.5vw);
				display: block;
			}
	
			.flexnav li a {
				color:#000;
			}
	
			.invert-header .flexnav li a {
				color: #000;
			}
	
			.flexnav:hover li a {
				opacity:0.3;
			}
	
			.flexnav li:hover a, .flexnav li a.active{
				opacity:1;
			}
	
			.flexnav .touch-button {
				width: 100%;
				display: block;
				height:10vw;
			}
	
			.flexnav li ul {
				margin-bottom:15px;
				margin-top: 15px;
				border-bottom: 1px solid #000;  
			}
	
			.flexnav li ul li a {
				padding: 3px 0;
				font-weight: 500;
				text-transform:none;
				font-size: 16px;
				line-height: 26px;
				border-top: none;
				opacity:0.4;
				-webkit-text-stroke:none;
			}
	
			.uppercase-text .flexnav li ul li a {
				text-transform:uppercase;		
			}
	
			.flexnav li ul li:hover a, .flexnav li ul li a.active{
				opacity:1;
			}
	
			.flexnav:hover li ul li a {
				opacity:0.3;
			}
	
			.flexnav:hover li ul li a.active, .flexnav:hover li ul li:hover > a {
				opacity:1;
			}
	
			.flexnav ul li ul li a {
				background: transparent;
			}
	
			.flexnav li ul li ul li a {
				padding: 10px 40px;	
			}
	
			.flexnav li ul li .touch-button {
				height:30px;
			}
	
			.flexnav .touch-button .navicon {
				display:none;
			}
	
			#menu-burger span.touch-button {
				display:none;
			}
			header {
		    	-webkit-transition: padding 0.4s ease-in-out 0.3s;
		        transition: padding 0s ease-in-out 0s;
		    }
			header.compressed {
		         height: 75px;
				 padding: 0px 20px;
			}
			#logo {
				position: absolute; 
			}
			header.compressed #logo {
		        top: 15px;
		    }
			.classic-menu .button-wrap.right.menu {
				display: block;
			}
	
			#footer-container {
		    	padding: 0 40px;	
			}
	
			.copyright {
				text-align:center;
			}
	
			.socials-wrap {
				width: 240px;
				height: 40px;
				float:right;
				margin:0 auto;
				right:-10px;
				transform: translateX(0px) translateY(20px)!important;
				-webkit-transform: translateX(0px) translateY(20px)!important;
			}
	
			.socials-wrap:hover {
				transform: translateY(20px);
				-webkit-transform: translateY(20px);
			}
	
			.socials-icon, .socials-text {
				display:none;
			}
	
			.socials-wrap .socials {
				margin-top: 3px;
				text-align: right;
				transform: translateX(0px);
				-webkit-transform: translateX(0px);	
			}
	
			.socials-wrap .socials li {
				opacity: 1;
				transform: translateY(0px);
				-webkit-transform: translateY(0px);
			}
	
			.socials-wrap:hover .socials li {
				opacity: 1;
				transform: translateY(0px)!important;
				-webkit-transform: translateY(0px)!important;
			}
	
			.socials li {
				margin-right: 10px;
				line-height: 30px;
				height: 30px;
				width: 30px;
				margin: 0 5px auto;
				display: inline-block;
				float: none;
			}
	
			.socials li a {
				height: 30px;
				width: 30px;
				line-height: 30px;
			}
	
		}
		@media only screen and (max-width: 1000px) {
			#hero-caption.height-title {
		        height: 53.3vh !important; 
		        padding-top: 8.8rem;
		        padding-bottom: 90px;
				flex-direction: column;
			}
			.page-error .hero-subtitle {
                padding-top: 15vw;
            }
			.hero-title {
		        font-size: calc(1rem + 25vw);
		        line-height: calc(1rem + 23.4vw);
		    }
			.section-hero-title {
		       font-size: calc(1rem + 13vw);
		       line-height: calc(1rem + 12.4vw);
			}
			.extra-padded-sides {
			   width: 95%; 
			   max-width: 100%; 
			}	
			.centered-paragraph.padded-text {
		        width: auto !important; 
				padding-left: 1rem;
				padding-right: 1rem; 
			}
		}
		@media only screen and (max-width: 767px) {
	
			figcaption {
				background-color: rgba(0,0,0,0.3);
				bottom: 0px;
				font-size: 10px;
				padding: 5px 10px;
				right: 0px;
				border-radius: 0;
			}
	
			.text-aligh-right {
				text-align:left;
			}
	
			.one_half {
		    	width: 100%!important;
			}
	
			.one_half {
		    	padding-right: 0!important;
			}
	
			.one_half.last {
		    	padding-left: 0!important;
			}

			.one_third {
				width: 100%!important;
			}	

			.one_fourth {
				width: 100%!important;
			}	

			.one_fifth {
				width: 100%!important;
			}	

			.one_sixth {
				width: 100%!important;
			}	

			.two_fifth {
				width: 100%!important;
			}	

			.two_fourth {
				width: 100%!important;
			}		

			.two_third {
				width: 100%!important;
			}	

			.three_fifth {
				width: 100%!important;
			}	

			.three_fourth {
				width: 100%!important;
			}	

			.four_fifth {
				width: 100%!important;
			}	

			.five_sixth {
				width: 100%!important;
			}	

			.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .two_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth {
				margin-bottom: 30px!important;
				margin-right: 0%!important;
			}

			.row_padding_top {
				padding-top:10vw;
			}
	
			.row_padding_bottom {
				padding-bottom:10vw;
			}

			.row_margin_bottom {
				margin-bottom:10vw;
			}

			.row_padding_left {
				padding-left: 0px;
			}
	
			.row_padding_right {
				padding-right: 0px;
			}
	
			.full.row_padding_left {
				padding-left: 30px;
			}
	
			.full.row_padding_right {
				padding-right: 30px;
			}

			.row_padding_all {
				padding-top: 4vw;
				padding-bottom: 4vw;
				padding-left: 0px;
				padding-right: 0px;
			}
	
			.full.row_padding_all {
				padding-top: 4vw;
				padding-bottom: 4vw;
				padding-left: 30px;
				padding-right: 30px;
			}
	
			.clip-effects {
				overflow: hidden;
				clip-path: inset(2% 5% round 30px);
			}
	
			hr {
				height: 20px;
			}
	
			.big-title {
				font-size: calc(1rem + 13vw);
				line-height: calc(1rem + 12.5vw);
			}
	
			.bigger {
				font-size: 20px;
				line-height: 30px;
			}
	
			.percentage-wrapper {
				width:16vw;
			}
	
			.percentage-intro {
		  		bottom: 30px;
			}
	
			header {
				height:80px;
			}
	
			#header-container {
		    	padding: 0;
				margin: 0 auto;
			}
	
			#logo {
				left: 30px;
			}
	
			.button-wrap.right.menu {
				right: 4px;
			}
	
			.button-wrap.right.menu.burger-lines {
				right: 0px;
			}
	
			header .button-text {
				display: none;
			}
		
			.flexnav > li > .touch-button {
				height:calc(1rem + 12.5vw);
			}
	
			#end.footer {
				height: 80px;
			}
	
			.footer-button-wrap {
		    	bottom: 80px;
			}
	
			#footer-container {
				height: 80px;
				padding: 0 30px;
				margin:0;
			}
	
			#footer-container #backtotop.button-wrap.left {
				float: none;
				top:5px;
				left: 0;
				right: 0;
				position: absolute;
				display:block;
			}
	
			#backtotop.button-wrap.left .button-text {
				text-align: left;
				float: left;
				display: none;
			}
	
			#backtotop.button-wrap.left .icon-wrap {
				float: none;
				position: absolute;
				right: auto;
				left: 0;
				margin: auto;
				top: 0px;
				opacity:0.4;
				-webkit-transition: opacity 0.2s ease-out 0s;
				transition: opacity 0.2s ease-out 0s;
			}
	
			#backtotop.button-wrap.left:hover .icon-wrap {
				opacity:1;
			}
	
			.footer-middle {
				max-width: 1180px;
				height:20px;
				position: relative;
				margin: 0 auto;
				left: 0;
				width: 100%;
				top: 0px;
				margin-bottom: 15px;
			}
	
			.copyright {
				margin: 0 auto;
				left: auto;
				right: auto;
				top: 0;
				height: 20px;
				line-height: 20px;
			}
	
			footer.showcase-footer .arrows-wrap {
				right: auto;
				left: -30px;
				float: left;
				margin: auto;
			}
	
			.socials-wrap {
				width: auto;
				float: none;
				display: table;
				left: auto;
				right: auto;
				top: 0;
				margin: 0 auto;		
				height: 20px;
				line-height: 20px;
				transform: translateX(0px) translateY(0px)!important;
				-webkit-transform: translateX(0px) translateY(0px)!important;
			}
	
			.socials-wrap .socials {
				text-align: center;
				margin: 0 auto;
				height: 20px;
				line-height: 20px;
				display: table;
				width: auto;
			}
	
			.socials li, .socials li a {
				height: 20px;
				line-height: 20px;
				margin: 0 auto;
			}
	
		}


		@media only screen and (max-width: 479px) {	
	
			.one_half, .one_third, .two_third, .three_fourth, .one_fourth, .two_fourth, .one_fifth, .two_fifth, .three_fifth, .four_fifth, .one_sixth, .five_sixth {
				margin-bottom: 20px!important;
				margin-right: 0%!important;
			}
	
			.row_padding_top {
				padding-top:12vw;
			}
	
			.row_padding_bottom {
				padding-bottom:12vw;
			}

			.row_margin_bottom {
				margin-bottom:12vw;
			}

			.row_padding_left {
				padding-left: 0px;
			}
	
			.row_padding_right {
				padding-right: 0px;
			}
	
			.full.row_padding_left {
				padding-left: 20px;
			}
	
			.full.row_padding_right {
				padding-right: 20px;
			}
	
			.row_padding_all {
				padding-top: 4vw;
				padding-bottom: 4vw;
				padding-left: 0px;
				padding-right: 0px;
			}
	
			.full.row_padding_all {
				padding-top: 4vw;
				padding-bottom: 4vw;
				padding-left: 20px;
				padding-right: 20px;
			}
	
			hr {
				height: 10px;
			}
	
			.big-title {
				font-size: calc(1rem + 14vw);
				line-height: calc(1rem + 13.5vw);
			}
	
			.percentage-wrapper {
				width:20vw;
			}
	
			#logo {
				left: 20px;
			}
	
			.button-wrap.right.menu {
				right: -6px;
			}
	
			.button-wrap.right.menu.burger-lines {
				right: -10px;
			}
		
			.flexnav > li > .touch-button {
				height:calc(1rem + 13.5vw);
			}
	
			#footer-container {
				padding: 0px;
				margin:0;
			}
	
			footer.showcase-footer #footer-container {
				padding: 0px 20px;
			}
	
			.arrows-wrap {
				left: -10px;
				width: 80px;
			}
	
			.prev-wrap, .next-wrap {
		    	width: 40px;
			}
	
			footer.showcase-footer .arrows-wrap {
				right: 0;
				left: 0;
				float: none;
				margin: auto;
			}
	
			footer.showcase-footer .arrows-wrap {
				width: 100%;
			}
	
			footer.showcase-footer .prev-wrap, footer.showcase-footer .next-wrap {
		    	width: 60px;
			}
	
			footer.showcase-footer .footer-middle {
				top: 0px;
			}
	
			footer.showcase-footer .showcase-subtitles-wrap {
				left: 0;
			}
	
			footer.showcase-footer .socials-wrap {
				display:none;
			}
	
			.button-text {
				display:none;
			}
	
			#main-page-content .button-text, #hero .button-text {
				display:block;
			}
		}

		@media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
    
			#rotate-device {
				display:block;
			}
		}