* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	Width: 100%;
	margin-left: auto;
	margin-right: auto;
	/*height: 100%;*/
	/*border: 1px dashed yellow;*/
	/*background-color: rgba(50, 240, 150, 0.2);*/
	/*background: linear-gradient(#ffba91, #fff79e);*/
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	text-align: justify;
	/*padding-top: 80px;*/
}


.background-color {
	/*background-color: orange;*/
	background: linear-gradient(217deg, rgba(255, 241, 166, 0.5), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(255, 166, 166, 0.5), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(123, 41, 5, 0.7), rgba(0,0,255,0) 80%);
}

.fullscreen {
	display: table; 
    table-layout: fixed;
	width: 100%;
	/*box-shadow: 0rem 1.5rem 3rem -0.75rem hsla(0 , 0% , 0% , 20);*/
    /*border-spacing: 10px; */
	/*border: 1px dashed red;*/
	/*border-radius: 10px;*/
}

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

.logo {
	width: 60px;
	height: 60px;
	padding: 10px;
	padding-left: 40px;
	animation: fade-down 0.5s 0.4s;
}

/*
.logo img {
	opacity: 10%;
	
}

.logo img:hover {
	-webkit-text-stroke: 2px #fff;
	color: #fff;
	cursor: pointer;
	opacity: 100%;
}
*/
/*----------------------------------------------------------------*/
.box1 {
	display: inline-block;
	width: 10rem;
	height: 10rem;
	transition-property: background-color, height;
	transition-duration: 1s;
	background-color: indigo;
	margin: 1rem;
}
/*
.box1:hover {
	background-color: indianred;
	height: 20rem;
	transition: 1s;
}
*/
/*----------------------------------------------------------------*/
.content-glass {
	display: grid;
	grid-auto-flow: row;
	width: auto;
	height:50%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
	padding: 4%;
	margin: 2%;
	background-color: none;
    overflow-y: hidden;
	transition: all 0.5s;

}

.content-glass:hover {
	display: block;
	height: 74%;
	background-color: gray;
	cursor: pointer;
	transform: scale(1.05);
}

.content-glass p {
	display: none;
	opacity: 0; 
	transition: opacity 0.5s, display 0s 0.5s;
}

.content-glass:hover p {
	display: block;
	opacity: 1;  
	transition: opacity 0.5s, display 0s;
	animation: fade-up 0.5s;
}

.subGrid1-container:hover .box1 {
	background-color: indianred;
	height: 20rem;
	transition: 1s;
}

/*----------------------------------------------------------------*/
.Column-nav {
	/*display: flex;*/
    /*table-layout: fixed;*/
	/*background-color: yellow;*/
	/*background-color: #422b25;*/
	position: fixed;
	z-index: 9999;
	top: 0;
	transition: 0.4s ease-in-out;
}

.Column-nav .scrolled {
	background-color: white;
	opacity: 0.98;
}

.Column-nav-scrolled p {
	color: #000000;
}

.Column-nav-scrolled nav a {
	color: #000000;
}

.Column-nav-scrolled {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/*
.animated-head-title {
	position: relative;
	color: transparent;
	-webkit-text-stroke: 1px #383d52;
	text-transform: uppercase;
}

.animated-head-title::before {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	color: #01fe87;
	-webkit-text-stroke: 0vw #383d52;
	border-right: 2px solid #01fe87;
	overflow: hidden;
	animation: animate 6s linear infinite;
}

@keyframes animate 
{
	0%, 10%, 100% 
	{
		width: 0%;
	}
	70%, 90% {
		width: 100%;
	}
}
*/
/*----------------------------------------------------------------*/
.head-title {
	font-family: Segoe Script;
	color: black;
	width: auto;
	padding:17px;
	animation: fade-down 0.5s 0.4s;
	/*border: 1px dashed red;*/
}

.movie-main-content {
	position: absolute;
	top: 36%;
	left: 50%;
	color: black;
	font-family: Segoe Script;
	font-size: 30px;
	text-align: center;
	padding-top: 160px;
}

.head-title h1 {
	font-size: 29px;
	color: transparent;
	font-weight: 600;
	transition: 0.5s;
	-webkit-text-stroke: 1px #000000;
	opacity: 50%;
}

.head-title h1:hover {
	-webkit-text-stroke: 1px #000000;
	color: #000000;
	cursor: pointer;
	opacity: 100%;
}
/*Main Section Grid----------------------------------------------------------------*/
.Grid-container {
	display: grid;
	grid-template-rows: repeat(5, 20vh);
	grid-template-columns: repeat(10, 1fr);
	/*border: 1px dashed rgb(206, 103, 44);*/
	grid-gap: 0px;
	z-index: -999;
}
/*Main Section Grid (Row 1)----------------------------------------------------------------*/
.Grid-1-1 {
	grid-row: 1/2;
	grid-column: 1/2;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-1-2 {
	grid-row: 1/2;
	grid-column: 2/3;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-1-3 {
	grid-row: 1/2;
	grid-column: 3/4;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-1-4 {
	grid-row: 1/2;
	grid-column: 4/5;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-1-5 {
	grid-row: 1/2;
	grid-column: 5/6;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-1-6 {
	grid-row: 1/2;
	grid-column: 6/7;
	display: flex;
	justify-content: center;
	align-items: center;
	background: none;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-1-7 {
	grid-row: 1/2;
	grid-column: 7/8;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-1-8 {
	grid-row: 1/2;
	grid-column: 8/9;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-1-9 {
	grid-row: 1/2;
	grid-column: 9/10;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-1-10 {
	grid-row: 1/2;
	grid-column: 10/11;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}
/*Main Section Grid (Row 2)----------------------------------------------------------------*/
.Grid-2-1 {
	grid-row: 2/3;
	grid-column: 1/2;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-2-2 {
	grid-row: 2/3;
	grid-column: 2/3;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-2-3 {
	grid-row: 2/3;
	grid-column: 3/4;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-2-4 {
	grid-row: 2/3;
	grid-column: 4/5;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-2-5 {
	grid-row: 2/3;
	grid-column: 5/6;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-2-6 {
	grid-row: 2/3;
	grid-column: 6/7;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-2-7 {
	grid-row: 2/3;
	grid-column: 7/8;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-2-8 {
	grid-row: 2/3;
	grid-column: 8/9;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-2-9 {
	grid-row: 2/3;
	grid-column: 9/10;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-2-10 {
	grid-row: 2/3;
	grid-column: 10/11;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}
/*Main Section Grid (Row 3)----------------------------------------------------------------*/
.Grid-3-1 {
	grid-row: 3/4;
	grid-column: 1/2;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-3-2 {
	grid-row: 3/4;
	grid-column: 2/3;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-3-3 {
	grid-row: 3/4;
	grid-column: 3/4;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-3-4 {
	grid-row: 3/4;
	grid-column: 4/5;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-3-5 {
	grid-row: 3/4;
	grid-column: 5/6;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-3-6 {
	grid-row: 3/4;
	grid-column: 6/7;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-3-7 {
	grid-row: 3/4;
	grid-column: 7/8;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-3-8 {
	grid-row: 3/4;
	grid-column: 8/9;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-3-9 {
	grid-row: 3/4;
	grid-column: 9/10;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-3-10 {
	grid-row: 3/4;
	grid-column: 10/11;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}
/*Main Section Grid (Row 4)----------------------------------------------------------------*/
.Grid-4-1 {
	grid-row: 4/5;
	grid-column: 1/2;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-4-2 {
	grid-row: 4/5;
	grid-column: 2/3;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-4-3 {
	grid-row: 4/5;
	grid-column: 3/4;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-4-4 {
	grid-row: 4/5;
	grid-column: 4/5;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-4-5 {
	grid-row: 4/5;
	grid-column: 5/6;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-4-6 {
	grid-row: 4/5;
	grid-column: 6/7;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-4-7 {
	grid-row: 4/5;
	grid-column: 7/8;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-4-8 {
	grid-row: 4/5;
	grid-column: 8/9;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-4-9 {
	grid-row: 4/5;
	grid-column: 9/10;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-4-10 {
	grid-row: 4/5;
	grid-column: 10/11;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}
/*Main Section Grid (Row 5)----------------------------------------------------------------*/
.Grid-5-1 {
	grid-row: 5/6;
	grid-column: 1/2;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-5-2 {
	grid-row: 5/6;
	grid-column: 2/3;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-5-3 {
	grid-row: 5/6;
	grid-column: 3/4;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-5-4 {
	grid-row: 5/6;
	grid-column: 4/5;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-5-5 {
	grid-row: 5/6;
	grid-column: 5/6;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-5-6 {
	grid-row: 5/6;
	grid-column: 6/7;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-5-7 {
	grid-row: 5/6;
	grid-column: 7/8;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-5-8 {
	grid-row: 5/6;
	grid-column: 8/9;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-5-9 {
	grid-row: 5/6;
	grid-column: 9/10;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}

.Grid-5-10 {
	grid-row: 5/6;
	grid-column: 10/11;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
	background: rgba(0, 0, 0, 0.2);
	border: 0.5px solid rgb(70, 70, 70);
	transition: 0.5s;
}




/*Main Section Grid (font-title1-box)----------------------------------------------------------------*/
.Grid-1-1:hover, .Grid-1-3:hover, .Grid-1-5:hover, .Grid-1-7:hover, .Grid-1-9:hover {	
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	/*transform: rotateZ(-5deg);*/
}
.Grid-1-2:hover, .Grid-1-4:hover, .Grid-1-6:hover, .Grid-1-8:hover, .Grid-1-10:hover {	
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	/*transform: rotateZ(5deg);*/
}


.Grid-2-1:hover, .Grid-2-3:hover, .Grid-2-5:hover, .Grid-2-7:hover, .Grid-2-9:hover {	
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	/*transform: rotateZ(5deg);*/
}
.Grid-2-2:hover, .Grid-2-4:hover, .Grid-2-6:hover, .Grid-2-8:hover, .Grid-2-10:hover {	
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	/*transform: rotateZ(-5deg);*/
}



.Grid-3-1:hover, .Grid-3-3:hover, .Grid-3-5:hover, .Grid-3-7:hover, .Grid-3-9:hover {	
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	/*transform: rotateZ(-5deg);*/
}
.Grid-3-2:hover, .Grid-3-4:hover, .Grid-3-6:hover, .Grid-3-8:hover, .Grid-3-10:hover {	
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	/*transform: rotateZ(5deg);*/
}


.Grid-4-1:hover, .Grid-4-3:hover, .Grid-4-5:hover, .Grid-4-7:hover, .Grid-4-9:hover {	
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	/*transform: rotateZ(5deg);*/
}
.Grid-4-2:hover, .Grid-4-4:hover, .Grid-4-6:hover, .Grid-4-8:hover, .Grid-4-10:hover {	
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	/*transform: rotateZ(-5deg);*/
}


.Grid-5-1:hover, .Grid-5-3:hover, .Grid-5-5:hover, .Grid-5-7:hover, .Grid-5-9:hover {	
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	/*transform: rotateZ(-5deg);*/
}
.Grid-5-2:hover, .Grid-5-4:hover, .Grid-5-6:hover, .Grid-5-8:hover, .Grid-5-10:hover {	
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	/*transform: rotateZ(5deg);*/
}










/*Main Section Grid (keyframes --> font-title1-box)----------------------------------------------------------------*/
@keyframes animate {
	100% {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	0% {
		transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
	}
}
/*
:after @keyframes animate {
	100% {
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	0% {
		transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg);
	}
}
*/
/*Main Section Grid (font-title1-box)----------------------------------------------------------------*/
.title1-box {
	width: 100%;
	height: 100%;
	transition: all 0.1s;
	/*border: 1px solid rgba(255, 123, 0, 0.5);*/
	transform-style: preserve-3d;
	transform: rotateX(0deg); /* 300 / 2 = 150 */
	/*box-shadow: 6px 6px 20px 0px rgba(0, 0, 0, .5);*/
	z-index: 18;
}
.title1-box:hover {
	animation: animate 2s linear infinite;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.title1-box span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	/*border-radius: 20px;*/
	box-shadow: inset 0 8px 32px 0 rgba(0, 0, 0, 0.1);
	transition: all 0.5s;
	transform: rotateY(calc(90deg * var(--i))) translateZ(92px); /* 300 / 2 = 150 */
}
.title1-box h2 {
	font-size: 18vh;
	transition: 0.5s;
	color:rgba(0, 0, 0, 0.8);
}
/*--*/
.font2-title1-box {
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.1s;
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
	transform-style: preserve-3d;
	transform: rotateX(0deg); /* 300 / 2 = 150 */
	box-shadow: 6px 6px 20px 0px rgba(0, 0, 0, .5);
	z-index: 2;
}
.font2-title1-box:hover {
	animation: animate 2s linear infinite;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
.font2-title1-box h2 {
	font-size: 20vh;
	color:rgba(0, 0, 0, 0.8);
}
.font2-title1-box span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	/*border-radius: 20px;*/
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
	transition: all 0.5s;
	transform: rotateY(calc(90deg * var(--i))) translateZ(92px); /* 300 / 2 = 150 */
	display: flex;
	justify-content: center;
	align-items: center;
}
/*Main Section Grid (location)----------------------------------------------------------------*/
.r1-c1-location {
	grid-row: 1/2;
	grid-column: 1/2;
}

.r1-c2-location {
	grid-row: 1/2;
	grid-column: 2/3;
}

.r1-c3-location {
	grid-row: 1/2;
	grid-column: 3/4;
}

.r1-c4-location {
	grid-row: 1/2;
	grid-column: 4/5;
}

.r1-c5-location {
	grid-row: 1/2;
	grid-column: 5/6;
}

.r1-c6-location {
	grid-row: 1/2;
	grid-column: 6/7;
}

.r1-c7-location {
	grid-row: 1/2;
	grid-column: 7/8;
}

.r1-c8-location {
	grid-row: 1/2;
	grid-column: 8/9;
}

.r1-c9-location {
	grid-row: 1/2;
	grid-column: 9/10;
}

.r1-c10-location {
	grid-row: 1/2;
	grid-column: 10/11;
}
/*Main Section Grid (Row 2)----------------------------------------------------------------*/
.r2-c1-location {
	grid-row: 2/3;
	grid-column: 1/2;
}

.r2-c2-location {
	grid-row: 2/3;
	grid-column: 2/3;
}

.r2-c3-location {
	grid-row: 2/3;
	grid-column: 3/4;
}

.r2-c4-location {
	grid-row: 2/3;
	grid-column: 4/5;
}

.r2-c5-location {
	grid-row: 2/3;
	grid-column: 5/6;
}

.r2-c6-location {
	grid-row: 2/3;
	grid-column: 6/7;
}

.r2-c7-location {
	grid-row: 2/3;
	grid-column: 7/8;
}

.r2-c8-location {
	grid-row: 2/3;
	grid-column: 8/9;
}

.r2-c9-location {
	grid-row: 2/3;
	grid-column: 9/10;
}

.r2-c10-location {
	grid-row: 2/3;
	grid-column: 10/11;
}
/*Main Section Grid (Row 3)----------------------------------------------------------------*/
.r3-c1-location {
	grid-row: 3/4;
	grid-column: 1/2;
}

.r3-c2-location {
	grid-row: 3/4;
	grid-column: 2/3;
}

.r3-c3-location {
	grid-row: 3/4;
	grid-column: 3/4;
}

.r3-c4-location {
	grid-row: 3/4;
	grid-column: 4/5;
}

.r3-c5-location {
	grid-row: 3/4;
	grid-column: 5/6;
}

.r3-c6-location {
	grid-row: 3/4;
	grid-column: 6/7;
}

.r3-c7-location {
	grid-row: 3/4;
	grid-column: 7/8;
}

.r3-c8-location {
	grid-row: 3/4;
	grid-column: 8/9;
}

.r3-c9-location {
	grid-row: 3/4;
	grid-column: 9/10;
}

.r3-c10-location {
	grid-row: 3/4;
	grid-column: 10/11;
}
/*Main Section Grid (Row 4)----------------------------------------------------------------*/
.r4-c1-location {
	grid-row: 4/5;
	grid-column: 1/2;
}

.r4-c2-location {
	grid-row: 4/5;
	grid-column: 2/3;
}

.r4-c3-location {
	grid-row: 4/5;
	grid-column: 3/4;
}

.r4-c4-location {
	grid-row: 4/5;
	grid-column: 4/5;
}

.r4-c5-location {
	grid-row: 4/5;
	grid-column: 5/6;
}

.r4-c6-location {
	grid-row: 4/5;
	grid-column: 6/7;
}

.r4-c7-location {
	grid-row: 4/5;
	grid-column: 7/8;
}

.r4-c8-location {
	grid-row: 4/5;
	grid-column: 8/9;
}

.r4-c9-location {
	grid-row: 4/5;
	grid-column: 9/10;
}

.r4-c10-location {
	grid-row: 4/5;
	grid-column: 10/11;
}
/*Main Section Grid (Row 5)----------------------------------------------------------------*/
.r5-c1-location {
	grid-row: 5/6;
	grid-column: 1/2;
}

.r5-c2-location {
	grid-row: 5/6;
	grid-column: 2/3;
}

.r5-c3-location {
	grid-row: 5/6;
	grid-column: 3/4;
}

.r5-c4-location {
	grid-row: 5/6;
	grid-column: 4/5;
}

.r5-c5-location {
	grid-row: 5/6;
	grid-column: 5/6;
}

.r5-c6-location {
	grid-row: 5/6;
	grid-column: 6/7;
}

.r5-c7-location {
	grid-row: 5/6;
	grid-column: 7/8;
}

.r5-c8-location {
	grid-row: 5/6;
	grid-column: 8/9;
}

.r5-c9-location {
	grid-row: 5/6;
	grid-column: 9/10;
}

.r5-c10-location {
	grid-row: 5/6;
	grid-column: 10/11;
}
/*Main Section Grid (font-title2-box)----------------------------------------------------------------*/
.title2-box {
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.5s;
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
	z-index: 2;
}
.title2-box:hover {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	/*transform: rotateZ(-5deg);*/
}
.title2-box h2 {
	font-size: 10vh;
	transition: 0.5s;
	color:rgba(255, 255, 255, 0.4);
}
.title2-box h2:hover {
	position: absolute;
	font-family: Georgia, serif;
	font-size: 10vh;
	color:rgba(255, 255, 255, 1);
	/*-webkit-text-stroke: 1px rgba(255, 255, 255, 1);*/
}
/*--*/
.font2-title2-box {
	grid-row: 2/3;
	grid-column: 3/4;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.5s;
	/*border: 2px solid rgba(125, 108, 92, 1);*/
	margin: auto;
	z-index: 2;
}
.font2-title2-box:hover {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	/*transform: rotateZ(5deg);*/
}
.font2-title2-box h2 {
	font-size: 10vh;
	color:rgba(255, 255, 255, 0.4);
	transition: 1s;
}
.font2-title2-box h2:hover {
	position: absolute;
	font-family: Georgia, serif;
	font-size: 10vh;
	color:rgba(255, 255, 255, 1);
	/*-webkit-text-stroke: 1px rgba(255, 255, 255, 1);*/
}
/*--*/

.font3-title2-box {
	grid-row: 3/4;
	grid-column: 3/4;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.5s;
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
	z-index: 2;
}
.font3-title2-box:hover {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	transform: rotateZ(-5deg);
}
.font3-title2-box h2 {
	font-size: 10vh;
	color:rgba(255, 255, 255, 0.4);
	transition: 1s;
}
.font3-title2-box h2:hover {
	position: absolute;
	font-family: Georgia, serif;
	font-size: 10vh;
	color:rgba(255, 255, 255, 1);
	/*-webkit-text-stroke: 1px rgba(255, 255, 255, 1);*/
}
/*--*/

.font4-title2-box {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transition: 0.5s;
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
	z-index: 2;
}
.font4-title2-box:hover {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	transform: rotateZ(5deg);
}
.font4-title2-box h2 {
	position: absolute;
	font-family: Georgia, serif;
	font-size: 10vh;
	color:rgba(255, 255, 255, 0.4);
	transition: 1s;
}
.font4-title2-box h2:hover {
	position: absolute;
	font-family: Georgia, serif;
	font-size: 10vh;
	color:rgba(255, 255, 255, 1);
	/*-webkit-text-stroke: 1px rgba(255, 255, 255, 1);*/
}
.font4-title2-box h2:nth-child(2) {
	color: #ff956b;
	text-shadow: 1px 1px 0 #744330,
	2px 2px 0 #cd7857,
	3px 3px 0 #cd7857,
	4px 4px 0 #cd7857,
	5px 5px 0 #cd7857,
	6px 6px 0 #cd7857,
	/*10px 10px 0 #958d70,*/
	/*10px 10px 0 #958d70,*/
	/*12px 12px 0 #958d70,*/
	/*14px 14px 0 #958d70,*/
	/*16px 16px 0 #958d70,*/
	7px 7px 15px #9d9d9d,
	8px 8px 20px #222,
	9px 9px 40px #222,
	10px 10px 80px #222;
	clip-path: circle(22% at 46% 20%);
	transition: clip-path 1s;
}
.font4-title2-box h2:hover:nth-child(2) {
	clip-path: circle(80% at 52% 18%);
	cursor: grab;
}
/*--*/

.font5-title2-box {
	grid-row: 5/5;
	grid-column: 3/4;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.5s;
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
	z-index: 2;
}
.font5-title2-box:hover {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	transform: rotateZ(-5deg);
}
.font5-title2-box h2 {
	font-size: 10vh;
	color:rgba(255, 255, 255, 0.4);
	transition: 1s;
}
.font5-title2-box h2:hover {
	position: absolute;
	font-family: Georgia, serif;
	font-size: 10vh;
	color:rgba(255, 255, 255, 1);
	/*-webkit-text-stroke: 1px rgba(255, 255, 255, 1);*/
}
/*Main Section Grid (font-painting-box)----------------------------------------------------------------*/
.font1-painting-box {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 2;
	transition: 0.5s;
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
}
.font1-painting-box:hover {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	transform: rotateZ(5deg);
}
.font1-painting-box h2 {
	position: absolute;
	font-size: 8vh;
	color:rgba(255, 255, 255, 0.1);
}
.font1-painting-box h2:nth-child(2) {
	color: #708c51;
	text-shadow: 2px 2px 0 #303c23,
	2px 2px 0 #5c7242,
	3px 3px 0 #5c7242,
	4px 4px 0 #5c7242,
	5px 5px 0 #5c7242,
	6px 6px 0 #5c7242,
	/*10px 10px 0 #4b5d36,*/
	/*10px 10px 0 #4b5d36,*/
	/*12px 12px 0 #4b5d36,*/
	/*14px 14px 0 #5c7242,*/
	/*16px 16px 0 #5c7242,*/
	7px 7px 15px #9d9d9d,
	8px 8px 20px #222,
	9px 9px 40px #222,
	10px 10px 80px #222;
	clip-path: circle(20% at 50% 70%);
	transition: clip-path 1s;
}
.font1-painting-box h2:hover:nth-child(2) {
	clip-path: circle(70% at 50% 80%);
	cursor: grab;
}
/*--*/
.font2-painting-box {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 2;
	transition: 0.5s;
	/*border: 2px solid rgba(125, 108, 92, 1);*/
	/*margin: auto;*/
}
.font2-painting-box:hover {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	transform: rotateZ(-5deg);
}
.font2-painting-box h2 {
	position: absolute;
	font-size: 8vh;
	color:rgba(255, 255, 255, 0.1);
	width: auto;
}
.font2-painting-box h2:nth-child(2) {
	color: #ffd364;
	text-shadow: 2px 2px 0 #685628,
	2px 2px 0 #ceaa51,
	3px 3px 0 #ceaa51,
	4px 4px 0 #ceaa51,
	5px 5px 0 #ceaa51,
	6px 6px 0 #ceaa51,
	/*10px 10px 0 #958d70,*/
	/*10px 10px 0 #958d70,*/
	/*12px 12px 0 #958d70,*/
	/*14px 14px 0 #958d70,*/
	/*16px 16px 0 #958d70,*/
	7px 7px 15px #9d9d9d,
	8px 8px 20px #222,
	9px 9px 40px #222,
	10px 10px 80px #222;
	clip-path: polygon(50% 25%, 75% 50%, 50% 75%, 25% 50%);
	transition: clip-path 1s;
}
.font2-painting-box h2:hover:nth-child(2) {
	clip-path: polygon(200% -100%, 200% 200%, -100% 200%, -100% -100%);
	cursor: grab;
}
/*--*/
.font3-painting-box {
	grid-row: 4/5;
	grid-column: 3/4;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	transition: 0.5s;
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
}
.font3-painting-box:hover {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	transform: rotateZ(5deg);
}
.font3-painting-box h2 {
	position: absolute;
	font-size: 8vh;
	color:rgba(255, 255, 255, 0.1);
}
/*--*/
.font4-painting-box {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 2;
	transition: 0.5s;
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
}
.font4-painting-box:hover {
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	transform: rotateZ(-5deg);
}
.font4-painting-box h2 {
	position: absolute;
	font-size: 8vh;
	color:rgba(255, 255, 255, 0.1);
}
.font4-painting-box h2:nth-child(2) {
	color: #d19666;
	text-shadow: 1px 1px 0 #6f4f36,
	2px 2px 0 #a57751,
	3px 3px 0 #a57751,
	4px 4px 0 #a57751,
	5px 5px 0 #a57751,
	6px 6px 0 #a57751,
	/*10px 10px 0 #958d70,*/
	/*10px 10px 0 #958d70,*/
	/*12px 12px 0 #958d70,*/
	/*14px 14px 0 #958d70,*/
	/*16px 16px 0 #958d70,*/
	7px 7px 15px #9d9d9d,
	8px 8px 20px #222,
	9px 9px 40px #222,
	10px 10px 80px #222;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	transition: clip-path 1s;
}
.font4-painting-box h2:hover:nth-child(2) {
	clip-path: polygon(200% -100%, 200% 200%, -100% 200%, -100% -100%);
	cursor: grab;
}

/*Main Section Grid (navigation-bar-box)----------------------------------------------------------------*/
.background-navigation-bar-box {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
	/*backdrop-filter: blur(10px);*/
	/*-webkit-backdrop-filter: blur(10px);*/
	/*border-radius: 20px;*/
	box-shadow: inset 10px 10px 15px 2px rgba(0, 0, 0, 0.5);
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
}

.navigation-bar-box {
	grid-row: 1/2;
	grid-column: 6/7;
}
/*Main Section Grid (project-box)----------------------------------------------------------------*/
.project-box {
	grid-row: 2/5;
	grid-column: 7/10;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.20);
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
	margin: 2%;
	z-index: 2;
}

.project-box1 {
	/*
	grid-row: 1/2;
	grid-column: 6/7;
	*/
	display: flex;
	justify-content: center;
	align-items: center;
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
	margin: 2%;
}
/*----------------------------------------------------------------*/
.nav-bar-box {
	grid-row: 1/2;
	grid-column: 4/5;
	display: flex;
	justify-content: center;
	align-items: center;
	/*background: linear-gradient(135deg, rgba(255, 255, 255, 0.5));*/
	backdrop-filter: blur(1px);
	/*-webkit-backdrop-filter: blur(10px);*/
	/*border-radius: 20px;*/
	box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, .5);
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
	background-color: rgba(80, 80, 80, 0.2);
	width: 100%;
	height: 100%;
    overflow-y: hidden;
	transition: all 0.5s;
	z-index: 2;
}

.nav-bar-box:hover {
	width: 100%;
	height: 500%;
	display: block;
	cursor: pointer;
	z-index: 500;
	backdrop-filter: blur(10px);
	background-color: rgba(150, 150, 150, .7);
	/*transform: scale(1.05);*/
}
/* (start) grid-nav-menu */
.grid-nav-container {
	display: grid;
	grid-template-rows: repeat(5, 20vh);
	grid-template-columns: repeat(1, 1fr);
	/*border: 1px dashed rgb(206, 103, 44);*/
	grid-gap: none;
}

.grid-nav0-1-menu {
	grid-row: 1/2;
	grid-column: 4/5;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
	z-index: 10;
	color: rgba(255, 255, 255, 0.4);;
	/*opacity: 0.5;*/
	/*border: 1px dashed rgb(48, 176, 144);*/
}

.grid-nav0-2-menu {
	grid-row: 1/2;
	grid-column: 1/2;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 10;
	color: #000000;
	text-decoration: none;
	/*border: 2px dashed rgb(159, 83, 83);*/
}

.grid-nav0-2-menu a {
	display: none;
}
.grid-nav1-menu {
	grid-row: 2/3;
	grid-column: 1/2;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 5;
	color: #000000;
	text-decoration: none;
	overflow-y: hidden;
	/*border: 1px dashed rgb(48, 176, 144);*/
}

.grid-nav2-menu {
	grid-row: 3/4;
	grid-column: 1/2;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 10;
	color: #000000;
	text-decoration: none;
	/*border: 1px dashed rgb(48, 176, 144);*/
}


.grid-nav2-menu a:hover {
	/*opacity: 50%;*/
	color: rgba(250, 250, 100, 0.8);		
	box-shadow: 0 0 35px rgba(250, 250, 100, 0.8);
	/*border-radius: 120px;*/
	margin: 10px;
}

sub {
	transition: 0.5s;
}

.grid-nav3-menu {
	grid-row: 4/5;
	grid-column: 1/2;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 10;
	color: #000000;
	text-decoration: none;
	/*border: 1px dashed rgb(48, 176, 144);*/
}

.grid-nav4-menu {
	grid-row: 5/6;
	grid-column: 1/2;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 10;
	color: #000000;
	text-decoration: none;
	/*border: 1px dashed rgb(48, 176, 144);*/
}
/* (end) grid-nav-menu */

.nav-bar-box:hover .grid-nav0-2-menu {
	display: block;
	padding: 6%;
	opacity: 1;  
	transition: opacity 0.5s, display 0s;
	animation: fade-up 0.5s;
	border: 0.5px solid rgb(70, 70, 70);
	z-index: 20;
}

.nav-bar-box:hover .grid-nav1-menu {
	display: block;
	padding: 6%;
	opacity: 1;  
	transition: opacity 0.5s, display 0s;
	animation: fade-up 0.5s;
	border: 0.5px solid rgb(70, 70, 70);
	z-index: 20;
	overflow-y: scroll;
}

.nav-bar-box:hover .grid-nav2-menu {
	display: block;
	padding: 6%;
	opacity: 1;  
	transition: opacity 0.5s, display 0s;
	animation: fade-up 0.5s;
	border: 0.5px solid rgb(70, 70, 70);
	z-index: 20;
	
}

.nav-bar-box:hover .grid-nav3-menu {
	display: block;
	padding: 6%;
	opacity: 1;  
	transition: opacity 0.5s, display 0s;
	animation: fade-up 0.5s;
	border: 0.5px solid rgb(70, 70, 70);
	z-index: 20;
}

.nav-bar-box:hover .grid-nav4-menu {
	display: block;
	padding: 6%;
	opacity: 1;  
	transition: opacity 0.5s, display 0s;
	animation: fade-up 0.5s;
	border: 0.5px solid rgb(70, 70, 70);
	z-index: 20;
}

/* (end) grid-nav-sub-menu */
.nav-sub-box {
	display: flex;
	justify-content: center;
	align-items: center;
}

.grid-nav1-sub1-menu {
	grid-row: 1/2;
	grid-column: 1/2;
	font-size: 12px;
	display: none;
	justify-content: start;
	align-items: center;
	color: #000000;
	text-decoration: none;
	border: 1px dashed rgb(48, 176, 144);
}

.grid-nav1-menu:hover .grid-nav1-sub1-menu {
	display: flex;
	padding: 6%;
	opacity: 1;  
	transition: opacity 0.5s, display 0s;
	animation: fade-up 0.5s;
	border: 0.5px solid rgb(70, 70, 70);
	z-index: 20;
	transition: 0.5s;
}

.grid-nav-container:hover .grid-nav0-2-menu {
	/*display: flex;*/ /*make it center*/
	transition: 0.5s;
}

.grid-nav-container:hover .grid-nav1-menu {
	/*display: flex;*/ /*make it center*/
	transition: 0.5s;
}
.grid-nav-container:hover .grid-nav2-menu {
	/*display: flex;*/ /*make it center*/
	transition: 0.5s;
}
.grid-nav-container:hover .grid-nav3-menu {
	/*display: flex;*/ /*make it center*/
	transition: 0.5s;
}
.grid-nav-container:hover .grid-nav4-menu {
	/*display: flex;*/ /*make it center*/
	transition: 0.5s;
}
/*
.grid-nav1-menu:hover a {
	transition: 0.5s;
}
*/
/*----------------------------------------------------------------*/

a:hover {
	/*opacity: 50%;*/
	color: rgba(255, 255, 255, 0.8);		
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
	/*border-radius: 120px;*/
	margin: 10px;
	border-radius: 10px;
	/*transform-style: preserve-3d;*/
	background: rgb(0, 0, 0, 0.1);
	/*transform: rotateZ(1deg);*/
}
/*----------------------------------------------------------------*/
.grid-content-container {
	display: grid;
	grid-template-rows: repeat(4, auto);
	grid-template-columns: repeat(1, auto);
	/*border: 1px dashed rgb(206, 103, 44);*/
	grid-gap: none;
	justify-content: center;
	align-items: center;
	/*margin: auto;*/
	transition: all 0.5s;
	z-index: 10;
	opacity: 0.5;
}

.grid-content1 {
	grid-row: 1/2;
	grid-column: 1/2;
	/*border: 1px dashed rgb(48, 176, 144);*/
	/*animation: moving-text 2s linear infinite;*/
}
.grid-content2 {
	grid-row: 2/3;
	grid-column: 1/2;
	margin: 10px;
	width: auto;
	height: auto;
	/*border: 1px dashed rgb(48, 176, 144);*/
}
.grid-content3 {
	grid-row: 3/4;
	grid-column: 1/2;
	/*border: 1px dashed rgb(48, 176, 144);*/
}
.grid-content4 {
	grid-row: 4/5;
	grid-column: 1/2;
	/*border: 1px dashed rgb(48, 176, 144);*/
}
/*----------------------------------------------------------------*/
.small-project-content-box {
	display: none;
	justify-content: center;
	align-items: center;
	overflow: clip;
	z-index: 10;
	color: rgba(0, 0, 0, 1);
	opacity: 0.5;
	/*border: 1px dashed rgb(48, 176, 144);*/
}


.project-content-box {
	display: block;
	justify-content: center;
	align-items: center;
	position: relative;
	/*background:  rgba(255, 255, 255, 0.1);*/
	/*backdrop-filter: blur(0px);*/
	/*border-radius: 20px;*/
	box-shadow: inset 22px 22px 30px 0 rgba(0, 0, 0, 0.7);
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
	width: 100%;
	height: 100%;
	overflow-x: hidden;
    overflow-y: hidden;
	transition: all 0.5s;
	z-index: 10;
}

.project-content-box h2 {
	font-size: 20px;
	transition: 0.5s;
	/*color:rgba(0, 0, 0, 0.8);*/
}

.project-content-box:hover {
	padding: 20%;
	width: 160%;
	height: 159%;
	overflow-y: scroll;
	z-index: 20;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(10px);
	box-shadow: inset 22px 22px 30px 0 rgba(0, 0, 0, 0.7);
	/*cursor: pointer;*/
}
.project-content-box:hover .grid-content-container {
	opacity: 1;
}
.project-content-box:hover .grid-content1 {
	opacity: 1;
}
.project-content-box:hover .grid-content2 {
	opacity: 1;
}
.project-content-box:hover .grid-content3 {
	opacity: 1;
}
.project-content-box:hover .grid-content4 {
	opacity: 4;
	text-align: justify;
}
/*----------------------------------------------------------------*/
.project-content-box1 {
	grid-row: 3/4;
	grid-column: 1/3;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.5));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.20);
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
	padding: 4%;
	margin: 4%;
	background-color: none;
	height: 68%;
    overflow-y: hidden;
	transition: all 0.5s;
	z-index: 2;
}

.project-content-box1:hover {
	display: block;
	height: 168%;
	cursor: pointer;
	transform: scale(1.05);
}

.project-content-box1 p {
	display: none;
	grid-row: 4/5;
	grid-column: 2/4;
	opacity: 0; 
	transition: opacity 0.5s, display 0s 0.5s;
}

.project-content-box1:hover p {
	display: block;
	grid-row: 4/5;
	grid-column: 2/4;
	opacity: 1;  
	transition: opacity 0.5s, display 0s;
	animation: fade-up 0.5s;
}

.subGrid1-container:hover .box1 {
	background-color: indianred;
	height: 20rem;
	transition: 1s;
}























/*Main Grid----------------------------------------------------------------*/
.mainGrid-container {
	display: grid;
	grid-template-rows: repeat(6, auto);
	grid-template-columns: repeat(4, 25%);
	border: 1px dashed rgb(206, 103, 44);
	grid-gap: 1px;
}
/*Row 1----------------------------------------------------------------*/
.mainGrid-topic-container {
	grid-row: 1/1;
	grid-column: 1/5;
}
/*Row 2----------------------------------------------------------------*/
.mainGrid-topic-contentRow2Column2-container {
	text-align: center;
	grid-row: 2/3;
	grid-column: 2/3;
	border: 1px dashed rgb(36, 114, 87);
}

.mainGrid-topic-contentRow2Column3-container {
	text-align: center;
	grid-row: 2/3;
	grid-column: 3/4;
	border: 1px dashed rgb(36, 114, 87);
}
/*Row 3----------------------------------------------------------------*/

.mainGrid-topic-contentRow3Column1-2-container {
	grid-row: 3/4;
	grid-column: 1/3;
	border: 1px dashed rgb(36, 114, 87);
}

.mainGrid-topic-contentRow3Column3-container {
	grid-row: 3/4;
	grid-column: 3/4;
	border: 1px dashed rgb(36, 114, 87);
}
/*Row 4----------------------------------------------------------------*/
.mainGrid-topic-contentRow4Column1-4-container {
	grid-row: 4/5;
	grid-column: 1/5;
	border: 1px dashed rgb(36, 114, 87);
}
/*Sub Grid-1---------------------------------------------------------------*/
.subGrid1-container {
	display: grid;
	grid-template-rows: repeat(1, 220px);
	grid-template-columns: repeat(2, 50%);
	border: 1px dashed rgb(76, 34, 10);
	grid-gap: 1px;
}
/*Sub Grid-1 Row 1----------------------------------------------------------------*/
.subGrid1-topic-contentRow1Column2-container {
	grid-row: 1/3;
	grid-column: 2/3;
	border: 1px dashed rgb(36, 114, 87);
}

.subGrid1-topic-contentRow1Column1-container {
	grid-row: 1/3;
	grid-column: 1/2;
	border: 1px dashed rgb(36, 114, 87);
}
/*text-light Grid-1---------------------------------------------------------------*/
.text-light-Grid-container {
	display: grid;
	grid-template-rows: repeat(1, 100%);
	grid-template-columns: repeat(1, 100%);
	border: 1px dashed rgb(76, 34, 10);
	justify-content: center;
	align-items: center;
}

.text-light-Grid-contentRow1Column1-container h2 {
	justify-content: center;
	align-items: center;
}
/*Sub Grid-1 Row 1----------------------------------------------------------------*/
.text-light-Grid-contentRow1Column1-container {
	grid-row: 1/2;
	grid-column: 1/2;
	border: 1px dashed rgb(36, 114, 87);
}
/*----------------------------------------------------------------*/

.Row {
    display: flex; 
    table-layout: fixed;
	width: 100%;
    /*border-spacing: 10px; */
	/*border: 1px dashed red;*/
	/*border-radius: 10px;*/
}

.Row80Percent {
    display: flex; 
    table-layout: fixed;
	height: 80%;
	width: 100%;
	border: 1px dashed black;
    /*border-spacing: 10px; */
	/*border-radius: 10px;*/
}

.Row70Percent {
    display: flex; 
    table-layout: fixed;
	height: 70%;
	width: 100%;
	/*border: 1px dashed black;*/
    /*border-spacing: 10px; */
	/*border-radius: 10px;*/
}

.Row50Percent {
    display: flex; 
    table-layout: fixed;
	height: 50%;
    /*border-spacing: 10px; */
	border: 1px dashed blue;
	/*border-radius: 10px;*/
}

.Row30Percent {
    display: flex;
    table-layout: fixed;
	height: 30%;
	width: 100%;
	border: 2px dashed purple;
    /*border-spacing: 10px; */
	/*border-radius: 10px;*/
}

.Row25Percent {
    display: flex;
    table-layout: fixed;
	height: 25%;
	width: 100%;
	/*border: 2px dashed purple;*/
    /*border-spacing: 10px; */
	/*border-radius: 10px;*/
}

.Row20Percent {
    display: flex;
    table-layout: fixed;
	height: 20%;
	width: 100%;
	border: 2px dashed purple;
    /*border-spacing: 10px; */
	/*border-radius: 10px;*/
}

.Row10Percent {
    display: flex;
    table-layout: fixed;
	height: 10%;
	width: 100%;
	/*border: 2px dashed purple;*/
    /*border-spacing: 10px; */
	/*border-radius: 10px;*/
}

.Row-poster_450x600_30percent-40percent {
    display: block; 
	table-layout: fixed;
	width: auto;
	height: auto;
    /*border-spacing: 10px; */
	/*border: 1px dashed blue;*/
	/*border-radius: 10px;*/
	/*border-radius: 10px;*/
}

.RowAuto {
    display: flex; 
    table-layout: fixed;
	height: auto;
	width: 100%;
    /*border-spacing: 10px; */
	border: 1px dashed blue;
	/*border-radius: 10px;*/
}

.slider-nav-Row {
    display: flex; 
    table-layout: fixed;
	width: 100%;
    /*border-spacing: 10px; */
	/*border: 1px dashed blue;*/
	/*border-radius: 10px;*/
	/*background: linear-gradient(to bottom, rgba(66, 43, 37, 1) 5%, rgba(198, 149, 85, 1) 95%);*/
	/*rgba(0, 0, 0, 1)*/
	/*rgba(0, 0, 0, 0)*/
	background-color: #422b25;
}
/*----------------------------------------------------------------*/
.Column100Percent {
	display: inline-block;
	width: 100%; /* Adjust the width as needed */
	height: auto;
    background-color: ; 
	/*border: 1px dashed blue;*/
	/*border-radius: 15px;*/
}

.Column90Percent {
	display: inline-block;
	width: 100%; /* Adjust the width as needed */
	height: auto;
    background-color: ; 
	/*border: 1px dashed blue;*/
	/*border-radius: 15px;*/
}

.Column80Percent {
	display: inline-block;
	width: 80%; /* Adjust the width as needed */
	height: auto;
    background-color: ; 
	border: 1px dashed blue;
	/*border-radius: 15px;*/
}

.Column70Percent {
	display: inline-block;
	width: 70%; /* Adjust the width as needed */
	height: auto;
    background-color: ; 
	/*border: 1px dashed blue;*/
	/*border-radius: 15px;*/
}

.Column60Percent {
	display: inline-block;
	width: 60%; /* Adjust the width as needed */
	height: auto;
    background-color: ; 
	/*border: 1px dashed blue;*/
	/*border-radius: 15px;*/
}

.Column50Percent {
	display: inline-block;
	width: 50%; /* Adjust the width as needed */
	height: auto;
    background-color: ; 
	border: 1px dashed red;
	/*border-radius: 15px;*/
}

.Column40Percent {
	display: flex;
	width: 40%; /* Adjust the width as needed */
	height: auto;
    background-color: ; 
	/*border: 1px dashed blue;*/
	/*border-radius: 15px;*/
}

.Column34Percent {
	display: inline-block;
	width: 34%; /* Adjust the width as needed */
	height: auto;
    background-color: ; 
	/*border: 1px dashed blue;*/
	/*border-radius: 15px;*/
}


.Column33Percent {
	display: inline-block;
	width: 34%; /* Adjust the width as needed */
	height: auto;
    background-color: ; 
	/*border: 1px dashed blue;*/
	/*border-radius: 15px;*/
}

.Column30Percent {
	display: inline-block;
	width: 30%; /* Adjust the width as needed */
	height: auto;
    background-color: ; 
	/*border: 1px dashed blue;*/
	/*border-radius: 15px;*/
}

.Column25Percent {
	display: inline-block;
	width: 25%; /* Adjust the width as needed */
	height: auto;
    background-color: ; 
	border: 1px dashed blue;
	/*border-radius: 15px;*/
}

.Column20Percent {
	display: inline-block;
	width: 20%; /* Adjust the width as needed */
	height: auto;
    background-color: ; 
	border: 3px dashed blue;
	/*border-radius: 15px;*/
}

.Column10Percent {
	display: inline-block;
	width: 10%; /* Adjust the width as needed */
	height: auto;
    background-color: ; 
	/*border: 1px dashed blue;*/
	/*border-radius: 15px;*/
}

.Column5Percent {
	display: inline-block;
	width: 10%; /* Adjust the width as needed */
	height: auto;
    background-color: ; 
	/*border: 1px dashed blue;*/
	/*border-radius: 15px;*/
}

.Column80Percent-main-title {
	display: inline-block;
	height: auto;
	width: 80%; /* Adjust the width as needed */
	/*border: 1px dashed blue;*/
	padding: 10px;	
}

.Column70Percent-text-tile {
	display: inline-block;
	width: 70%; /* Adjust the width as needed */
	height: auto;
	/*border: 1px dashed blue;*/
	/*border-radius: 15px;*/
}

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

.main-nav-Row {
	/*background: linear-gradient(to top, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 90%);*/
	/*background-color: #422b25;*/
}

.background-navigation-bar-box {
	/*background-color: ;*/
	/*border: 1.5px dashed red;*/
	width: 450%; /*63%*/
	animation: fade-down 0.5s 0.4s;
	transition: all 0.5s;
	border: 1.5px dashed blue;
	z-index: 1;
	
}
.background-navigation-bar-box:hover {
	width: 463%;
	/*background-color: ;*/
	/*border: 1.5px dashed red;*/
}

.margin-padding-bar-box {
	padding-left: 100px;
	border: 1.5px dashed red;
}

.text-navigation-bar-box {
	z-index: 10;
}



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

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

.footer-manage {
	color: white;
	background: rgba(51, 2, 59, 0.5);
	font-size: 10px;
}

.font-size1 {
	font-size: 20px;
}

/*----------------------------------------------------------------*/
.movie-main-Row {
	display: table;
    width: 100%; 
	height: 600px;
    table-layout: fixed;
    /*border-spacing: 10px;*/ 
	border: 3px dashed red;
	
	/*border-radius: 10px;*/
}

.slider-nav-Row {
    display: flex; 
    table-layout: fixed;
	width: 100%;
    /*border-spacing: 10px; */
	/*border: 1px dashed blue;*/
	/*border-radius: 10px;*/
	/*background: linear-gradient(to bottom, rgba(66, 43, 37, 1) 5%, rgba(198, 149, 85, 1) 95%);*/
	/*rgba(0, 0, 0, 1)*/
	/*rgba(0, 0, 0, 0)*/
	background-color: #422b25;
}
/*----------------------------------------------------------------*/

.slider-wrapper {
	z-index: -1; /* Adjust the z-index value to put the slider behind other content */
	position: relative; /*Relative when we use absolute positioning on the navigation*/
	/*max-width: ;*/
	margin: 0 auto;
}

.slider-wrapper .slider-button {
	position: absolute;
	top: 50%;
	height: 50px;
	width: 50px;
	color: #9c5454;
	border: none;
	outline: none;
	background: #000000;
	font-size: 2.2rem;
	cursor: pointer;
	border-radius: 50%;
	transform: traylateY(-50%);
}

.slider-wrapper .slider-button:hover {
	background: #444;
}

.slider-wrapper .slider-button#prev-slide {
	left: -20px;
}

.slider-wrapper .slider-button#prev-slide {
	right: -20px;
}

.slider-wrapper .image-list {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(10, 1fr);
	font-size: 0px;
	margin-bottom: 30px;
	overflow-x: auto;
	scrollbar-width: none;
}

.slider-wrapper .image-list::-webkit-scrollbar {
	display: none;
}

.slider-wrapper .image-list .image-item {
	width: 325px;
	height: 400px;
	object-fit: cover;
}
/*----------------------------------------------------------------*/
.content-logo {
	grid-row: 3/4;
	grid-column: 2/4;
	width: 100px;
	height: 100px;
	filter: invert(0%) sepia(12%) saturate(14%) hue-rotate(236deg) brightness(0%) contrast(100%);
	display: block;
	margin-left: auto;
	margin-right: auto;
	transition: transform 0.5s;
}

.content-logo:hover {
	cursor: pointer;
	transform: scale(1.1);
}
/*----------------------------------------------------------------*/
.content-logo-project {
	width: 80%;
	height: 80%;
	/*margin: 2%;*/
	opacity: 90%;
	border-radius: 20px;
	filter: brightness(0%);
}

.content-image {
	width: 0%;
	height: 0%;
	opacity: 0%;
	border-radius: 20px;
	transition: all 1s;
	filter: grayscale(100%);
}

.content-image:hover {
	transform: scale(1.05);
}

.subGrid1-container:hover .content-image {
	width: 96%;
	height: 90%;
	margin: 2%;
	opacity: 90%;
	border-radius: 20px;
	filter: grayscale(0);
}
/*----------------------------------------------------------------*/
.content-box {
	cursor: pointer;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	/*border: 1px solid rgba(125, 108, 92, 0.5);*/
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
	position: absolute;
}

.content-box a {
	transition: 0.8s;
}
/*----------------------------------------------------------------*/
/* Keyframes  Navigation bar */
@keyframes fade-down {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }
  
    100% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }
}

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(70px) scale(0.7);
    }
  
    100% {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }
}

@keyframes fade-right {
    0% {
        opacity: 0;
        transform: translateX(30px) scale(0.9);
    }
  
    100% {
        opacity: 1;
        transform: translateX(0px) scale(1);
    }
}
/*----------------------------------------------------------------*/
.button-product {
	color: #000000;
	text-decoration: none;
	border: 1px solid rgb(255, 255, 255, 0.4); 
	padding: 6px; box-shadow: inset 2px 2px 4px 0px rgba(0, 0, 0, .5);
	transition: 0.5s;
}

.container {
	width: 100%;
	height: 100dvh;
	align-items: center;
	justify-content: center;
	background: linear-gradient(454deg, #363636, #ffffff);
	overflow-x: hidden;
	overflow-y: hidden;
	/*overflow-y: scroll;*/
	/*scroll-snap-type: y mandatory;*/
}

.scrolling-slides {
	width: 100%;
	height: 100vh;
	align-items: center;
	justify-content: center;
	background: linear-gradient(454deg, #363636, #ffffff);
	/*scroll-snap-align: start;*/
}
/* Main Cube 1----------------------------------------------------------------*/

.cube {
	position: relative;
	width: 100%;
	height: 300px;
	transform-style: preserve-3d;
	transform: rotateX(-30deg); /* 300 / 2 = 150 */
	animation: animate 8s linear infinite;
	display: flex;
	align-items: center;
	text-align: center;
}


	

.cube div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

.cube div span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
	transition: all 0.5s;
	transform: rotateY(calc(90deg * var(--i))) translateZ(160px); /* 300 / 2 = 150 */
	display: flex;
	justify-content: center;
	align-items: center;
}

.top-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 300px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	transform: rotateX(90deg) translateZ(150px);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

.bottom-box {
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 300px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	transform: rotateX(90deg) translateZ(-150px);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}


.text-box-elevation1 {
	font-size: 3em;
	color: rgba(55, 55, 55, 0.5);
	transform: translateZ(50px);
	align-items: center;
	text-align: center;
	/*box-shadow: inset 0 8px 32px 0 rgba(0, 0, 0, 0.1);*/
}
/*
.top-box::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
	height: 300px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1));
	transform: translateZ(-380px);
	filter: blur(20px);
	box-shadow: 0 0 120px rgba(65, 65, 65, 0.2),
				0 0 200px rgba(65, 65, 65, 0.4),
				0 0 300px rgba(65, 65, 65, 0.6),
				0 0 400px rgba(65, 65, 65, 0.8),
				0 0 500px rgba(65, 65, 65, 1),
	;
}
*/
/*
.cube div span:hover {
	display: block;
	height: 74%;
	cursor: pointer;
	transform: scale(1.05);
}
*/
/*----------------------------------------------------------------*/

.main-text-container {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
/*----------------------------------------------------------------*/
.main-text-container h2 {
	position: absolute;
	font-size: 120px;
	color: #444;
	text-shadow: -2px 2px 0 #222,
	-4px 4px 0 #222,
	-6px 6px 0 #222,
	-8px 8px 0 #222,
	-10px 10px 0 #222,
	-10px 10px 0 #222,
	-12px 12px 0 #222,
	-14px 14px 0 #222,
	-16px 16px 0 #222,
	-18px 18px 20px #222,
	-18px 18px 30px #222,
	-18px 18px 50px #222,
	-18px 18px 150px #222;
	cursor: default;
}
/*----------------------------------------------------------------*/
.main-text-container h2:nth-child(3) {
	color: #2cff37;
	text-shadow: -2px 2px 0 #222,
	-4px 4px 0 #08a010,
	-6px 6px 0 #08a010,
	-8px 8px 0 #08a010,
	-10px 10px 0 #08a010,
	-10px 10px 0 #08a010,
	-12px 12px 0 #08a010,
	-14px 14px 0 #08a010,
	-16px 16px 0 #08a010,
	-18px 18px 20px #222,
	-18px 18px 30px #222,
	-18px 18px 50px #222,
	-18px 18px 150px #222;
	clip-path: circle(20% at 0% 0%);
	transition: clip-path 1s;
}

.main-text-container h2:hover:nth-child(3) {
	clip-path: circle(80% at 0% 0%);
	cursor: grab;
}
/*----------------------------------------------------------------*/
.main-text-container h2:nth-child(2) {
	color: #03a9f4;
	text-shadow: -2px 2px 0 #222,
	-4px 4px 0 #0375a9,
	-6px 6px 0 #0375a9,
	-8px 8px 0 #0375a9,
	-10px 10px 0 #0375a9,
	-10px 10px 0 #0375a9,
	-12px 12px 0 #0375a9,
	-14px 14px 0 #0375a9,
	-16px 16px 0 #0375a9,
	-18px 18px 20px #222,
	-18px 18px 30px #222,
	-18px 18px 50px #222,
	-18px 18px 150px #222;
	clip-path: circle(20% at 50% 100%);
	transition: clip-path 1s;
}

.main-text-container h2:hover:nth-child(2) {
	clip-path: circle(50% at 50% 100%);
	cursor: grab;
}
/*----------------------------------------------------------------*/
.main-text-container h2:nth-child(4) {
	color: #e91e63;
	text-shadow: -2px 2px 0 #222,
	-4px 4px 0 #ae0840,
	-6px 6px 0 #ae0840,
	-8px 8px 0 #ae0840,
	-10px 10px 0 #ae0840,
	-10px 10px 0 #ae0840,
	-12px 12px 0 #ae0840,
	-14px 14px 0 #ae0840,
	-16px 16px 0 #ae0840,
	-18px 18px 20px #222,
	-18px 18px 30px #222,
	-18px 18px 50px #222,
	-18px 18px 150px #222;
	clip-path: circle(25% at 100% 50%);
	transition: clip-path 1s;
}

.main-text-container h2:hover:nth-child(4) {
	clip-path: circle(100% at 100% 50%);
	cursor: grab;
}
/*----------------------------------------------------------------*/
/*
@keyframes moving-text {
	0%
	{
		transform: translate(-100%, 0%);
	}
	100%
	{
		transform: translate(100%, 0%);
	}
}
*/
/*----------------------------------------------------------------*/

::-webkit-scrollbar {
	width: 15px;
}
::-webkit-scrollbar-track {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
	border-radius: 10px;
	margin-block: 10px;
	opacity: 0.5;
}
::-webkit-scrollbar-thumb {
	background: linear-gradient(90deg, #b7b7b7, #686868);
	margin: 10px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	transition: 0.5s;
}
::-webkit-scrollbar-thumb:hover {
	border: 1px solid rgb(0, 0, 0, 0.5);
	box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 1);
}