/*----------------------------------------------------------------------------------*/
/*---------------------------------------------*/
/*------- WELCOME -----------------------------*/
/*---------------------------------------------*/
.Page .Welcome
{
	position: relative;
	padding-top: 0.5vw;
	
	width: 100%;
	
	text-align: center;
	/*font-size: min(12.84px, 1.5vw); /* max size at 700px -> total width: 856px. So 1.5% = 12.84px */
	font-size: 2vw;
	font-family: Raj-light;
	font-variant : small-caps;
}

.Page .Welcome .TextMe
{
	animation: nameAppearText ease 3s;
	-webkit-animation: nameAppearText ease 3s;
}

.Page .Welcome .Me
{
	/*margin-top: max(-18.832px, -2.2vw); /* max size at 700px -> total width: 856px. So -2.1% = -17.976px */
	/*font-size: min(38.52px, 4.5vw); /* max size at 700px -> total width: 856px. So 4.5% = 38.52px */
	margin-top: -2.1vw;
	font-size: 4.5vw; 
	
	animation: nameAppear ease 3s;
	-webkit-animation: nameAppear ease 3s;
}

.Page .Welcome .TextIntro1
{
	animation: introAppearText1 ease 3s;
	-webkit-animation: introAppearText1 ease 3s;
}

.Page .Welcome .TextIntro2
{
	animation: introAppearText2 ease 3s;
	-webkit-animation: introAppearText2 ease 3s;
}

.Page .Welcome .Intro
{
	/*margin-top: max(-10.70px, -1.25vw); /* max size at 700px -> total width: 856px. So -1.25% = -10.70px */
	/*margin-bottom: max(-6.848px, -0.8vw); /* max size at 700px -> total width: 856px. So -0.8% = -6.848px */
	/*font-size: min(25.68px, 3vw); /* max size at 700px -> total width: 856px. So 3% = 25.68px */
	margin-top: -1.25vw;
	margin-bottom: -0.8vw;
	font-size: 3vw;
	
	animation: introAppear ease 3s;
	-webkit-animation: introAppear ease 3s;
}

.Page .Welcome .Logo
{
	/*margin-top: min(12.84px, 1.5vw); /* max size at 700px -> total width: 856px. So 1.5% = 12.84px */
	/*margin-top: 1vw;*/
	
	animation: logoAppear ease 1s;
	-webkit-animation: logoAppear ease 1s;
}

.Page .Welcome .Logo img
{
	width: 90%;
	max-width: 150px;
}

.Page .Welcome .Desc
{
	/*margin-top: min(17.12px, 2vw); /* max size at 700px -> total width: 856px. So 2% = 17.12px */
	margin-top: 2vw;
	
	width: 100%;
	/*height: min(76.172px, 8.9vw); /* it's specific, I just get value from debugger */
	height: 8.9vw;
	
	border-top: 1px solid var(--mainOrange);
	border-bottom: 1px solid var(--mainOrange);
	
	background-color: var(--secGrey);
	color: var(--txtGrey);
	
	/*font-size: min(17.12px, 2vw); /* max size at 700px -> total width: 856px. So 2% = 17.12px */
	font-size: 2vw;
	line-height: 85%;
	font-family: Raj-medium;
	
	animation: descAppear ease 1s;
	-webkit-animation: descAppear ease 1s;
}

.Page .Welcome .Desc .Title
{
	/*font-size: min(21.4px, 2.5vw);*/
	font-size: 2.5vw;
	font-family: Raj;
	color: var(--secGreen);
	line-height: 120%;
}

.Page .Welcome .Desc .Left
{
	float: left;
	text-align: right;
	width: 49%;
	height: 100%;
}

.Page .Welcome .Desc .Left img
{
	float: left;
	height: 90%;
	
	margin-top: 0.4vw;
	margin-left: 0.5vw;
	
	border-radius: 50%;
}

.Page .Welcome .Desc .Right
{
	float: right;
	text-align: left;
	width: 49%;
	height: 100%;
}

.Page .Welcome .Desc .Right img
{
	float: right;
	height: 90%;
	
	margin-top: 0.4vw;
	margin-right: 0.5vw;
	
	border-radius: 50%;
}

.Page .Welcome .Content
{
	font-variant : initial;
	text-align: initial;
	padding-top: 0px;
	
	animation: contentAppear ease 1.25s;
	-webkit-animation: contentAppear ease 1.25s;
}

/*----- LITTLE RESOLUTIONS -----*/
@media only screen and (max-width: 650px)
{
	.Page .Welcome
	{
		font-size: 2.5vw;
	}

	.Page .Welcome .Me
	{
		margin-top: -3.5vw;
		font-size: 8vw; 
	}

	.Page .Welcome .Intro
	{
		margin-top: -2.5vw;
		margin-bottom: -1.5vw;
		font-size: 6vw;
	}

	.Page .Welcome .Logo
	{
		margin-top: 2.5vw;
	}
	
	.Page .Welcome .Logo img
	{
		width: 75%;
		max-width: none;
	}

	.Page .Welcome .Desc
	{
		height: 35vw;
		border: none;
		background-color: inherit;
		
		margin-top: 2vw;
		font-size: 3.5vw;
		line-height: 85%;
		font-family: Raj;
	}
	
	.Page .Welcome .Desc .Title
	{
		font-size: 5vw;
	}

	.Page .Welcome .Desc .Left
	{
		position: relative;
		width: 95%;
		height: 17vw;
		
		padding-left: 5%;
		
		text-align: left;
		
		border-top: 1px solid var(--mainOrange);
		border-bottom: 1px solid var(--mainOrange);
		
		background-color: var(--secGrey);
	}
	
	.Page .Welcome .Desc .Left img
	{
		float: right;
		
		margin-top: 0.8vw;
		margin-right: 1vw;
	}
	
	.Page .Welcome .Desc .Right
	{
		position: relative;
		width: 95%;
		height: 16.5vw;
		
		margin-top: 1vw;
		padding-right: 5%;
		
		text-align: right;
		
		border-top: 1px solid var(--mainOrange);
		border-bottom: 1px solid var(--mainOrange);
		
		background-color: var(--secGrey);
	}
	
	.Page .Welcome .Desc .Right img
	{
		float: left;
		
		margin-top: 0.8vw;
		margin-left: 1vw;
	}
}

/* Have to do this to more compatible than with min() and max() functions...*/
@media only screen and (min-width: 855px)
{
	.Page .Welcome
	{
		font-size: 17.12px; /* max size at 700px -> total width: 856px. So 2% = 17.12px */
	}

	.Page .Welcome .Me
	{
		margin-top: -17.976px; /* max size at 700px -> total width: 856px. So -2.1% = -17.976px */
		font-size: 38.52px; /* max size at 700px -> total width: 856px. So 4.5% = 38.52px */
	}

	.Page .Welcome .Intro
	{
		margin-top: -10.70px; /* max size at 700px -> total width: 856px. So -1.25% = -10.70px */
		margin-bottom: -6.848px; /* max size at 700px -> total width: 856px. So -0.8% = -6.848px */
		font-size: 25.68px; /* max size at 700px -> total width: 856px. So 3% = 25.68px */
	}

	.Page .Welcome .Logo
	{
		margin-top: 12.84px; /* max size at 700px -> total width: 856px. So 1.5% = 12.84px */
	}

	.Page .Welcome .Desc
	{
		display: grid;
		grid-template-columns: auto 330px 330px auto;
		
		margin-top: 17.12px; /* max size at 700px -> total width: 856px. So 2% = 17.12px */
		height: 76.172px; /* it's specific, I just get value from debugger */
		
		font-size: 17.12px; /* max size at 700px -> total width: 856px. So 2% = 17.12px */
	}
	
	.Page .Welcome .Desc .Left
	{
		width: 98%;
		height: 100%;
	}
	
	.Page .Welcome .Desc .Left img
	{
		height: 70px;
		
		margin-top: 3.424px;
		margin-left: 4.280px;
	}
	
	.Page .Welcome .Desc .Right
	{
		margin-left: 2%;
		width: 98%;
		height: 100%;
	}
	
	.Page .Welcome .Desc .Right img
	{
		height: 70px;
		
		margin-top: 3.424px;
		margin-right: 4.280px;
	}
	
	.Page .Welcome .Desc .Title
	{
		font-size: 21.4px;
	}
}

.Page .Welcome .Foot
{
	animation: footAppear ease 2s;
	-webkit-animation: footAppear ease 2s;
}

/*----- ANIMATIONS -----*/
@keyframes nameAppear
{
	0% 
	{
		opacity:0;
		transform:  translate(0px,25px);
	}
	25%
	{
		opacity:0;
		transform:  translate(0px,25px);
	}
	40%
	{
		opacity:1;
		transform:  translate(0px,0px);
	}
	100%
	{
		opacity: 1;
		transform:  translate(0px,0px);
	}
}

@-webkit-keyframes nameAppear
{
	0% 
	{
		opacity:0;
		-webkit-transform:  translate(0px,25px);
	}
	25%
	{
		opacity:0;
		-webkit-transform:  translate(0px,25px);
	}
	40%
	{
		opacity: 1;
		-webkit-transform:  translate(0px,0px);
	}
	100%
	{
		opacity: 1;
		-webkit-transform:  translate(0px,0px);
	}
}

@keyframes nameAppearText
{
	0% 
	{
		opacity:0;
	}
	20%
	{
		opacity:0;
	}
	35%
	{
		opacity:1;
	}
	100%
	{
		opacity: 1;
	}
}

@-webkit-keyframes nameAppearText
{
	0% 
	{
		opacity:0;
	}
	20%
	{
		opacity:0;
	}
	35%
	{
		opacity: 1;
	}
	100%
	{
		opacity: 1;
	}
}

@keyframes introAppear
{
	0%
	{
		opacity: 0;
		transform:  translate(0px,25px);
	}
	40% 
	{
		opacity:0;
		transform:  translate(0px,25px);
	}
	55%
	{
		opacity:1;
		transform:  translate(0px,0px);
	}
	100%
	{
		opacity: 1;
		transform:  translate(0px,0px);
	}
}

@-webkit-keyframes introAppear
{
	0%
	{
		opacity: 0;
		-webkit-transform:  translate(0px,25px);
	}
	40%
	{
		opacity: 0;
		-webkit-transform:  translate(0px,25px);
	}
	55%
	{
		opacity: 1;
		-webkit-transform:  translate(0px,0px);
	}
	100%
	{
		opacity: 1;
		-webkit-transform:  translate(0px,0px);
	}
}

@keyframes introAppearText1
{
	0%
	{
		opacity: 0;
	}
	35% 
	{
		opacity:0;
	}
	50%
	{
		opacity:1;
	}
	100%
	{
		opacity: 1;
	}
}

@-webkit-keyframes introAppearText1
{
	0%
	{
		opacity: 0;
	}
	35%
	{
		opacity: 0;
	}
	50%
	{
		opacity: 1;
	}
	100%
	{
		opacity: 1;
	}
}

@keyframes introAppearText2
{
	0%
	{
		opacity: 0;
	}
	50% 
	{
		opacity:0;
	}
	60%
	{
		opacity:1;
	}
	100%
	{
		opacity: 1;
	}
}

@-webkit-keyframes introAppearText2
{
	0%
	{
		opacity: 0;
	}
	50%
	{
		opacity: 0;
	}
	60%
	{
		opacity: 1;
	}
	100%
	{
		opacity: 1;
	}
}

@keyframes logoAppear
{
	0%
	{
		opacity: 0;
		/*width: 70%;
		margin-left: 15%;*/
	}
	100%
	{
		opacity: 1;
		/*width: 100%;
		margin-left: 0%;*/
	}
}

@-webkit-keyframes logoAppear
{
	0%
	{
		opacity: 0;
		/*width: 70%;
		margin-left: 15%;*/
	}
	100%
	{
		opacity: 1;
		/*width: 100%;
		margin-left: 0%;*/
	}
}

@keyframes descAppear
{
	0%
	{
		opacity:0;
		transform:  translate(0px,25px);
	}
	100%
	{
		opacity: 1;
		transform:  translate(0px,0px);
	}
}

@-webkit-keyframes descAppear
{
	0%
	{
		opacity: 0;
		-webkit-transform:  translate(0px,25px);
	}
	100%
	{
		opacity: 1;
		-webkit-transform:  translate(0px,0px);
	}
}

@keyframes contentAppear
{
	0%
	{
		opacity: 0;
		transform:  translate(0px,25px);
	}
	50%
	{
		opacity:0;
		transform:  translate(0px,25px);
	}
	100%
	{
		opacity: 1;
		transform:  translate(0px,0px);
	}
}

@-webkit-keyframes contentAppear
{
	0%
	{
		opacity: 0;
		-webkit-transform:  translate(0px,25px);
	}
	50%
	{
		opacity:0;
		-webkit-transform:  translate(0px,25px);
	}
	100%
	{
		opacity: 1;
		-webkit-transform:  translate(0px,0px);
	}
}

@keyframes footAppear
{
	0%
	{
		opacity: 0;
	}
	50% 
	{
		opacity:0;
	}
	100%
	{
		opacity: 1;
	}
}

@-webkit-keyframes footAppear
{
	0%
	{
		opacity: 0;
	}
	50% 
	{
		opacity:0;
	}
	100%
	{
		opacity: 1;
	}
}