@import url('monoid.css');

/* BASIC */
body {
	overflow-x: hidden;
}
.sttext {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	left: 0;
}
.content {
	overflow-y: auto;
}
.imgholder {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(1fr, 1fr));
	align-content: start;
	width: 100vw;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 544px;
	overflow-x: auto;
	overflow-y: hidden;
}
.text {
	height: 502px;
	width: 350px;
	padding: 20px;
	border: 1px solid #ccc;
	margin-left: 7px;
	overflow-y: auto;
}

.titleH2 {
	text-align: left;
	font-weight: 500;
	position: sticky;
	top: -20px;
	background-color: #fff;
	height: 50px;
	display: flex;
	align-items: center;
}
.text1 {
	height: 100%;
	width: 350px;
	font-family: 'monoidRegular', sans-serif;
	font-size: .75rem;
}

.ulprojimg {
	display: flex;
	flex-wrap: nowrap;
	list-style: none;
	height: 90%;
}

.liprojimg {
	display: flex;
	flex-wrap: wrap;
	height: 99%;
	flex-grow: 1;
	margin-left: 5px;
	top: 0;
}

.projimg {
	height: 550px;
	min-width: 100%;
	object-fit: contain;
	vertical-align: bottom;
}

.arr {
	display: block;
	right: -45%;
	height: 100%;
	width: 100px;
}
.img1 {
	position: fixed;
	height: 70px;
	top: 85%;
	z-index: 20;
}
/* ADVANCED */

/* Short screens */

@media screen and (max-height: 480px) {
	.ulprojimg {
		transform: translateY(50%);
	}
	.liprojimg {
		height: 100%;
		width: 100%;
	}
	.imgholder {
		height: 100vh;
		width: 100vw;
		display: flex;
		top: 0;
	}
	.projimg {
		height: 100vh;
	}
}

/* nav item animation start */
.nav-icon {
	margin: 1em;
	width: 40px;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 20px;
}

.nav-icon:after,
.nav-icon:before,
.nav-icon .navitem {
	background-color: #df6900;
	border-radius: 3px;
	content: '';
	display: block;
	height: 2px;
	margin: 7px 0;
	transition: all .2s ease-in-out;
}
.nav-icon:hover:before {
	transform: translateY(6px) rotate(135deg);
}

.nav-icon:hover:after {
	transform: translateY(-12px) rotate(-135deg);
}

.nav-icon:hover .navitem {
	transform: scale(0);
}
.nav {
	position: absolute;
	right: 20px;
	top: 32px;
	list-style: none;
	transition: all .2s ease;
	/* display: none;  */
	opacity: 0;
}
.nava {
	text-decoration: none;
	color: #000;
}
.nava:hover {
	color: #df6900;
}
/* 70px inline-flex */
.navit {
	display: inline-flex;
	color: #000;
	font-family: 'monoidRegular', sans-serif;
	margin-right: 20px;
}

.nav-icon:hover ~ .nav,
.nav:hover {
	opacity: 1;
	display: block;
	right: 60px;
	background-clip: content-box;
}

/* nav item animation end */

@media screen and (max-width: 768px) {
	body {
		overflow: auto;
	}
	.ulprojimg {
		flex-wrap: wrap;
		position: absolute;
		top: 10%;
		overflow: unset;
		left: -40px;
		width: calc(100vw - 1.5rem);
		left: 47%;
		transform: translateX(-50%);
	}
	.imgholder {
		display: contents;
		flex-wrap: wrap;
		flex-direction: column;
		height: 100vh;
		overflow: auto;
		position: absolute;
		left: 0;
	}
	.liprojimg {
		margin-left: 0;
		height: fit-content;
	}
	.imgholder {
		height: 100vh;
		width: 100vw;
		display: contents;
		top: 0;
		position: absolute;
		left: 0;
	}
	.projimg {
		height: auto;
		width: 100%;
		margin-bottom: 30px;
	}

	@supports (height: min-intrinsic) {
		.projimg {
			height: min-intrinsic;
		}
	}

	.liprojimg:nth-last-of-type(2) {
		padding-bottom: 50px;
	}
	.titleH2 {
		position: unset;
		top: unset;
	}
	.arr {
		display: none;
	}
	.text {
		display: block;
		width: 100%;
		height: auto;
		margin: 0 auto;
		margin-bottom: 30px;
		overflow: unset;
	}
	.text1 {
		height: 100%;
		width: 100%;
	}
	.lastli {
		display: none;
	}
	.imgphone {
		background-image: url(../images/stlogophone.svg);
		background-size: contain;
		background-repeat: no-repeat;
		width: 100vw;
		height: 13vw;
		position: fixed;
		z-index: 2;
		left: 0;
		bottom: -10px;
		border-top: 2px solid #fff;
	}
	.nav-icon {
		z-index: 2;
		top: 10px;
		position: fixed;
	}
	.nav {
		top: 10px;
		z-index: 2;
		height: 50px;
		width: 140px;
		background-color: #fff;
		position: fixed;
	}
	.navit {
		position: relative;
		top: 20px;
		left: 10px;
	}
	.sttext {
		display: none;
	}
	.text {
		height: auto;
	}
}

@media screen and (max-width: 414px) {
	.ulprojimg {
		left: 45%;
	}
}