.ml1 {
	color: var(--mc-4);
	font-weight: 600;
	font-size: 8vw;
}

.ml2 {
	color: var(--mc-1);
	font-weight: 400;
	font-size: 5vw;
}

.ml1 .letter,
.ml2 .letter {
	display: inline-block;
	line-height: 1em;
}
  
.ml1 .text-wrapper {
	position: relative;
	display: inline-block;
	top: 20vh;
	left: 25vw;
	padding-bottom: 0.15em;
}


.ml2 .text-wrapper {
	padding: 15px;
	background-color: var(--bg-color-opec);
	position: relative;
	display: inline-block;
	bottom: -50vh;
	left: 5vw;
	padding-bottom: 0.15em;
}

@media (max-width:820px) and (orientation: portrait) {
	.ml1 .text-wrapper { 
		left: 0;
	}
	.ml2 .text-wrapper { 
		bottom: -70vh;
	}
	.ml2 {

		font-size: 8vw;
	}
}
@media (min-width:1600px) and (orientation: landscape) {
	.ml1 .text-wrapper { 
		left: 0;
	}
	.ml2 .text-wrapper { 
		bottom: -70vh;
		left: 0;
	}
	.ml2 {

		font-size: 2vw;
	}
}
  
.ml1 .line,
.ml2 .line {
	opacity: 0;
	position: absolute;
	left: 0;
	height: 3px;
	width: 100%;
	background-color: var(--bg-1);
	transform-origin: 0 0;
}
  
.ml1 .line1,
.ml2 .line1  { 
	top: 0; 
}
.ml1 .line2,
.ml2 .line2 { 
	bottom: 0; 
}