@charset "utf-8";
/* CSS Document */

/* ============ FONTS  ============ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;600;700;800;900&display=swap');



.ml11 span { font-size: 30px; font-weight: 400; line-height: 32px; }

.ml11 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}

.ml11 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 90%;
  width: 2px;
  background-color: #fff;
  transform-origin: 0 50%;
}

.ml11 .line1 { 
  top: 0; 
  left: 0;
}

.ml11 .letter {
  display: inline-block;
  line-height: 1em;
}


@media screen and (max-width: 660px) { .ml11 span { font-size: 24px; line-height: 28px; }}

/*-- Title--*/


.ml10 {
	position: relative;
	font-weight: 900;
	font-size: 2em;
	color: #BFBFBF;
}

.ml10 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}

.ml10 .letter {
  display: inline-block;
  line-height: 1em;
  transform-origin: 0 0;
}

/*-- Title Big Bold --*/

.ml6 {
	position: relative;
	text-align: center;
	word-break: keep-all;
}

.ml6 span {
	color: #FFFFFF;
	font: 700 60px "Barlow", sans-serif;
	text-align: center;
	word-break: keep-all;
}

.ml6 .text-wrapper {
	position: relative;
	display: inline-block;
	padding-top: 0.2em;
	padding-right: 0.05em;
	padding-bottom: 0.1em;
	overflow: hidden;
}

.ml6 .letter {
  display: inline-block;
  line-height: 1em;
}

/*-- Title up&underline --*/

.ml1 {text-align: center;}

.ml1 .letter {
	display: inline-block;
	line-height: 40px;
	font: 600 34px; 
}

.ml1 .text-wrapper {
  	position: relative;
  	display: inline-block;
  	padding-top: 0.1em;
  	padding-right: 0.05em;
  	padding-bottom: 0.15em;
}

.ml1 .line {
	opacity: 0;
	position: absolute;
	left: 0;
	height: 2px;
	width: 100%;
	background-color: #2B2B2B;
	transform-origin: 0 0;
}

.ml1 .line1 { top: 0; }
.ml1 .line2 { bottom: 0; }

/*-- Title underline --*/

.ml-1 {
	text-align: center;	
}
.ml-1 span {
	text-align: center;
	color: #B4B4B4;
	font: 200 80px "Barlow Condensed";
	line-height: 90px;
	letter-spacing: 10px;
}
.ml-1.letter {
	display: inline-block;
}

.ml-1.text-wrapper {
  	position: relative;
  	display: inline-block;
  	padding-top: 0.1em;
  	padding-right: 0.05em;
  	padding-bottom: 0.15em;
}

.ml-1.line {
	opacity: 0;
	position: absolute;
	left: 0;
	height: 2px;
	width: 100%;
	background-color: #EDF1F1;
	transform-origin: 0 0;
}

.ml-1.line1 { top: 0; }
.ml-1.line2 { bottom: 0; }


@media only screen and (max-width: 320px) {
	
}
@media only screen and (max-width: 400px) {
	
}
@media only screen and (max-width: 600px) {
	
}
@media only screen and (max-width: 480px) {
	
}