/* ******************************************************************************* */
/* *********************************** LAIK.COM ********************************** */
/* ******************************************************************************* */

/* ************************************ RESET ************************************ */

*, *::before, *::after{
	box-sizing: border-box; 
}
* {
  margin: 0;
	padding: 0;
}
body, html{
	height: 100%; 
 	scroll-behavior: smooth; 
}
body {
  -webkit-font-smoothing: antialiased;
}
html:focus-within{
	scroll-behavior: smooth; 
}

/* ************************************ LAY-OUT ************************************ */

@font-face {
	font-family: 'TRC';
  src: url('trancon.woff2') format('woff2');
}

@font-face {
	font-family: 'TRCB';
  src: url('trancon-b.woff2') format('woff2');
}
body {
  background-color: #FF6D1B;
  font-family: "TRCB", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}
@media screen and (max-width:600px) {
	body {
		height: 80vh;
		overflow: hidden; 
	}
}
body.green {
  background-color: #5FD1B4;
}
.container {
  font-size: calc(10vw + 10vh);
  line-height: 0.9;
  text-align: left; 
  max-width: 100%;
  padding: 50px;
}
@media (orientation: portrait) {
  .container {
    font-size: 20vw;
    padding: 40px;
  }
}
#text1 {
	letter-spacing: -5px;
  color: #FF6D1B;
  white-space: pre-line;
}
#text2 {
	letter-spacing: -5px;
  color: #fff;
}
#text3 {
  font-family: "TRC", sans-serif;
	font-size: 25px;
	line-height: 40px;
  color: #fff;
	max-width: 700px; 
  opacity: 0;
  transform: translateY(-100px);
}
@media screen and (max-width:600px) {
	#text3 {
		font-size: 20px;
		line-height: 30px;
	}
	#c2a {
		font-size: 15px;
		line-height: 15px;
	}
}
#logo{
	display: block;
	width: 200px;
	height: auto;
	margin-bottom: 30px;
}
#c2a {
  background-color: #FF6D1B;
	border-radius: 100px;
  font-family: "TRCB", sans-serif;
	font-size: 20px;
	line-height: 20px;
	color: #fff;
	text-decoration: none;
	display: block;
	float: left;
	clear: both;
	margin-top: 30px;
	padding: 12px 20px 15px 20px;
}
#link{
	font-size: 15px;
	line-height: 15px;
	color: #fff;
	display: inline-block;
	margin: 45px 0 0 30px;
}
@media screen and (max-width:600px) {
	#link {
		margin: 30px 0 0 0px;
	}
}
.none {
	visibility: hidden;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
#text1.fade-out{
  opacity: 0;
  transition: opacity 0.75s ease-in;
}
#text2.fade-in{
  opacity: 1;
}
#text2.fade-in.fade-out{
  opacity: 0;
  transform: translateY(-100px);
  transition: opacity 0.6s ease-in, transform 0.6s ease-in;
}
#text3.fade-in{
  opacity: 1;
  transform: translateY(0px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}