@import url('monoid.css');

.grid-container {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: 1fr;
	width: 100%;
	max-width: 1600px;
	height: 100vh;
	height: 544px;
	margin: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
}
.grid-item {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	place-items: flex-end;
	color: #fff;
	font-family: 'monoidRegular', sans-serif;
	z-index: 1;
}
.logo {
	background-image: url(../images/studiotext.svg);
	background-repeat: no-repeat;
}
.text {
	position: relative;
	bottom: -5px;
}

.graphic {
	display: block;
	height: 544px;
	width: 76.2vw;
	left: 23.8vw;
	max-width: 1199px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	background-image: url(../images/homegraphic-01.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 100% 100%;
	pointer-events: none;
}

@media screen and (max-width: 1102px) {
	.graphic {
		background-size: contain;
		top: 45%;
	}
	.grid-container {
		height: 60%;
	}
	.logo {
		background-size: cover;
	}
}

@media screen and (min-height: 595px) and (max-height: 584px) {
	.grid-container {
		height: 40%;
	}
}

@media screen and (min-height: 1024px) and (max-height: 1366px) {
	.grid-container {
		height: 30%;
	}
}

@media screen and (max-width: 900px) {
	.grid-container {
		height: 60%;
	}
	.graphic {
		background-size: 100% 110%;
	}
}
@media screen and (max-width: 800px) {
	.grid-container {
		height: 50%;
	}
	.graphic {
		background-size: 100% 110%;
	}
}

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
	.graphic {
		top: 41%;
	}
}

@media screen and (min-width: 1315px) {
	.graphic {
		position: absolute;
		background-size: cover;
		height: 544px;
		width: 70.2vw;
		left: 29.2vw;
		top: 54%;
	}
	.grid-container {
		position: absolute;
		top: 20%;
		transform: translateY(-0%);
		left: 50%;
		transform: translateX(-50%);
		height: 544px;
	}
}

@media screen and (min-width: 2180px) {
	.graphic {
		position: absolute;
		background-size: cover;
		height: 544px;
		width: 48vw;
		left: 34.4vw;
	}
}

@media screen and (max-height: 835px) and (min-height: 700px) {
	.grid-container {
		top: 15%;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
	.graphic {
		top: 45%;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
	.graphic {
		top: 45%;
	}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
	.grid-container {
		height: 60%;
	}
	.graphic {
		top: 45%;
	}
}

.grid-link {
	text-decoration: none;
}

.gi1 {
	background-color: #fff;
	background-image: url(../images/live.svg);
	background-repeat: no-repeat;
	background-position: center;
}
.gi2 {
	background-color: #bbb;
}
.gi3 {
	background-color: #ababab;
}
.gi4 {
	background-color: #828282;
}
.gi5 {
	background-color: #505050;
}
.gi6 {
	background-color: #353535;
}
.gi7 {
	background-color: #262626;
}

.grid-link:hover .gi1 {
	background-color: #f2f2f2;
}
.grid-link:hover .gi2 {
	background-color: #b4b4b4;
}
.grid-link:hover .gi3 {
	background-color: #9e9e9e;
}
.grid-link:hover .gi4 {
	background-color: #787878;
}
.grid-link:hover .gi5 {
	background-color: #404040;
}
.grid-link:hover .gi6 {
	background-color: #303030;
}
.grid-link:hover .gi7 {
	background-color: #1e1e1e;
}

.contactgrid {
	margin: auto;
	display: grid;
	grid-template-columns: 55px repeat(5, 1fr);
	height: 544px;
	width: 100vw;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.cgriditem {
	display: flex;
	/* align-items: center; */
	justify-content: center;
	color: #fff;
	height: 100%;
	width: 100%;
	font-family: 'monoidRegular', sans-serif;
	text-align: center;
}
.linkabout {
	text-decoration: none;
	color: #fe9334;
}
.linkabout:hover {
	text-decoration: underline;
}
.title {
	margin-top: auto;
}
.contentcontact {
	height: 100%;
	margin-top: 20px;
	line-height: 30px;
}
.title {
	align-self: flex-end;
	width: 100%;
	text-align: center;
	justify-self: center;
	margin-top: -38px;
}
.titlem {
	display: none;
}
.mapslogo {
	border: 2px solid #ccc;
	transition: 0.2s border ease;
	margin-top: 20px;
	border-radius: 10px;
}

/* 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 0.2s ease-in-out;
}
.nav-icon:hover:before,
.nav-icon:focus:before {
	transform: translateY(6px) rotate(135deg);
}

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

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

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

/* nav item animation end */

/* project list start */

.contentPhone {
	display: none;
}

.pgrid {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 544px;
	width: 100%;
	display: grid;
	grid-template-columns: 50px repeat(4, 1fr);
	column-gap: 10px;
	left: 0;
}
.phoneBelow {
	display: none;
}
.phoneAbove {
	display: none;
}
.plist {
	width: 100%;
	height: 100%;
	border: 1px solid #ccc;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	font-family: 'monoidRegular', sans-serif;
}
.plistcontent {
	align-self: flex-end;
	width: 100%;
	color: #000;
	display: block;
}
.plisttitle {
	text-align: center;
	padding-top: 25px;
	display: block;
	color: #fff;
}

.projectlist {
	display: block;
	height: 480px;
	width: 100%;
	overflow-y: scroll;
}
.projects-list {
	font-size: 0.7rem;
	line-height: 25px;
	list-style-type: none;
	counter-reset: li;
	font-family: 'monoidRegular', sans-serif;
	width: 85%;
}
.list_li {
	margin-bottom: 7px;
}
.list_li1 {
	margin-bottom: 7px;
}
.list_li1:before {
	counter-increment: li;
	content: counter(li, decimal-leading-zero);
	color: #df6900;
	margin-right: 0.25em;
	font-size: 0.8rem;
	margin-right: 0.7em;
}
.listA {
	color: #df6900;
	text-decoration: none;
}
.listA:hover {
	text-decoration: underline;
}
.list_li:before {
	counter-increment: li;
	content: counter(li, decimal-leading-zero);
	color: #989898;
	margin-right: 0.25em;
	font-size: 0.8rem;
	margin-right: 0.7em;
}
.down {
	position: sticky;
	position: -webkit-sticky;
	height: 20px;
}
.downarrowli {
	position: sticky;
	position: -webkit-sticky;
	display: block;
	top: 0;
	left: 100%;
	margin-right: 10px;
	height: 20px;
	width: 20px;
	padding: 10px;
	background-color: #ccc;
	/* border-radius: 50%; */
	cursor: pointer;
}
.plisttitlemobile {
	display: none;
}

@media screen and (max-width: 768px) {
	.downarrowli {
		display: none;
	}
	.pl2 .pl3 .pl4 {
		height: 0;
	}
}
/* project list end */

/* services start */
.servicesgrid {
	display: grid;
	height: 544px;
	width: 100%;
	display: grid;
	grid-template-columns: 55px repeat(9, minmax(350px, 1fr));
	width: 100vw;
}

.servicetext {
	color: #fff;
	font-family: 'monoidRegular', sans-serif;
	font-size: 0.8em;
	align-self: center;
	text-align: center;
}
.serviceitem {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex-direction: column;
	height: 100%;
	width: 350px;
}
.gridcontainerservices {
	overflow-x: auto;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.servicecontent {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 0 15px 0 15px;
}
.titleservi {
	color: #fff;
	font-family: 'monoidRegular', sans-serif;
	text-transform: uppercase;
	position: relative;
	bottom: -5px;
	align-self: center;
}
/* services end */

/* us start */
.usgrid {
	margin: auto;
	display: grid;
	grid-template-columns: 60px repeat(5, 1fr);
	height: 544px;
	width: 100vw;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.ugriditem {
	display: flex;
	width: 100%;
	height: 100%;
	background-color: #ccc;
	justify-content: center;
	align-items: center;
}
.textu {
	font-family: 'monoidRegular', sans-serif;
	color: #fff;
	font-size: 0.8rem;
	/*padding: 10px;*/
	text-align: left;
	width: calc(90% - 10px);
	justify-self: center;
	align-self: center;
}
.picus {
	width: 100%;
}
.griduitemcontent {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-evenly;
	height: 100%;
}
.p1 {
	display: flex;
	align-self: flex-end;
}

@media screen and (min-width: 1440px) {
	.usgrid {
		height: 544px;
	}
	.griduitemcontent {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-evenly;
		height: 544px;
	}
	.picus {
		width: 100%;
		object-fit: cover;
		height: 200px;
	}
	.griduitemcontent {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-evenly;
		height: 100%;
	}
	.img3 {
		height: 500px;
	}
	.pus1 {
		height: 100%;
	}
}
/* us end  */
@media screen and (max-width: 1316px) {
	.img3 {
		justify-content: flex-start;
	}
}
@media screen and (max-width: 1150px) {
	.ti1 {
		align-items: flex-start;
		justify-content: flex-start;
	}
}

@media screen and (max-width: 768px) {
	.grid-container {
		/* display: block; */
		display: grid;
		top: 25%;
		grid-template-columns: none;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	}
	.logo {
		display: none;
	}
	.text {
		top: 0;
		right: 1em;
	}
	.grid-item {
		height: 120px;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		text-transform: lowercase;
	}
	.gi1 {
		background-position: 5% 50%;
	}
	.l1 {
		grid-row: 7/8;
		/* padding-bottom: 50px; */
	}
	.l2 {
		grid-row: 1/2;
	}
	.l3 {
		grid-row: 2/3;
	}
	.l4 {
		grid-row: 3/4;
	}
	.l5 {
		grid-row: 4/5;
	}
	.l6 {
		grid-row: 5/6;
	}
	.gi7 {
		background-color: #bbb;
	}
	.gi6 {
		background-color: #ababab;
	}
	.gi5 {
		background-color: #828282;
	}
	.gi4 {
		background-color: #505050;
	}
	.gi3 {
		background-color: #353535;
	}
	.gi2 {
		background-color: #262626;
	}
	.grid-link:hover .gi7 {
		background-color: #b4b4b4;
	}
	.grid-link:hover .gi6 {
		background-color: #9e9e9e;
	}
	.grid-link:hover .gi5 {
		background-color: #787878;
	}
	.grid-link:hover .gi4 {
		background-color: #494949;
	}
	.grid-link:hover .gi3 {
		background-color: #303030;
	}
	.grid-link:hover .gi2 {
		background-color: #1e1e1e;
	}
	.logo {
		display: none;
	}
	.graphic {
		background-image: url(../images/phonehomegraphic.svg);
		background-position: 100% 100%;
		background-size: contain;
		height: 775px;
		top: 32.5%;
		left: -40px;
		position: absolute;
		width: 170px;
		z-index: 10;
	}
	.contactgrid {
		display: block;
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 50%;
	}
	.cgriditem {
		display: flex;
		height: 30%;
		width: 100%;
		flex-direction: column;
	}
	.sttext {
		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;
	}
	.lastgridcontent {
		padding-bottom: 50px;
	}
	.title {
		margin-top: 0;
		align-self: flex-start;
		line-height: 0;
		display: none;
	}
	.titlem {
		display: block;
	}
	.mapslogo {
		margin-top: 0;
	}
	.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;
	}
	.pgrid {
		display: none;
	}
	.contentPhone {
		display: block;
	}
	.plist {
		width: 90%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		height: 0;
	}
	.phoneBelow {
		display: block;
	}
	.phoneAbove {
		display: block;
	}
	.contentPhone {
		overflow: auto;
		height: 45vh;
		width: 99.5%;
		border: 1px solid #ccc;
		position: relative;
		top: 120px;
		font-family: 'monoidRegular', sans-serif;
	}
	#cPhone {
		height: 100%;
	}
	.pilistcontent {
		height: 0;
	}
	.plisttitle {
		display: none;
	}
	.plisttitlemobile {
		display: block;
		position: relative;
		top: 120px;
		color: #fff;
		font-family: 'monoidRegular', sans-serif;
		padding: 7px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
	.projectlist {
		height: 0%;
	}
	.projects-list {
		height: 0%;
		display: block;
	}
	.plistcontent {
		height: 100%;
	}

	.servicesgrid {
		display: block;
		top: 10%;
		left: 0;
		position: absolute;
	}
	.serviceitem {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100vw;
	}

	.usgrid {
		display: grid;
		grid-template-rows: repeat(5, 1fr);
		grid-template-columns: none;
		justify-content: flex-start;
		top: 45%;
	}
	.lastugriditem {
		padding-bottom: 50px;
	}
	.p1 {
		align-self: flex-start;
	}
}

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

@media screen and (max-width: 375px) {
	.graphic {
		height: 715px;
		top: 363px;
	}

	.gi1 {
		padding-bottom: 30px;
		background-position: 5% 30%;
	}
}
@media screen and (max-width: 360px) {
	.graphic {
		height: 775px;
	}
}
@media screen and (max-width: 375px) and (max-height: 667px) {
	.graphic {
		top: 50%;
		height: 775px;
	}
}

@media screen and (max-width: 320px) and (max-height: 568px) {
	.graphic {
		top: 59%;
		height: 775px;
	}
}

@media screen and (min-width: 1319px) and (max-width: 1609px) {
	.graphic {
		top: 54%;
		left: 25vw;
		width: 75vw;
	}
}

@media screen and (min-width: 2400px) {
	.graphic {
		width: 50%;
		left: 33.6vw;
	}
}
.arrows {
	position: absolute;
	top: 85%;
	width: 100%;
	display: flex;
	justify-content: space-between;
	left: -5px;
}
.arrimg {
	height: 70px;
	width: 70px;
	cursor: pointer;
	object-fit: contain;
}
.arrleft {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}
@media screen and (max-width: 768px) {
	.arrows {
		display: none;
	}
}