* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Lato",sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7;
	color: #777;
	padding: 30px;
}

.header {
	height: 95vh;
	background-image: linear-gradient(
		 to right bottom,
		 rgba(126, 213, 111, .8), 
		 rgba(40, 180, 131, .8)),
		 url(../img/mets1.jpg);
	background-size: cover;
	background-position: top;
	position: relative;

	clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
}
/*clip-path starts from the top-left corner and
 moves clockwise top-right then right-bottom and to left bottom*/

 .logo-box {
 	position: absolute;
 	top: 40px;
 	left: 40px;
 }

 .logo {
 	height: 30px;
 }

 .text-box {
 	position: absolute;
 	top: 40%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	text-align: center;
 }
 /*text-box as the main h1 stands already in the beginning of left-50% 
 and top-50%, but we need them to be shifted that the middle of this 
 aligns the position not the top-left corner*/

 .heading-primary {
 		color: #fff;
 		text-transform: uppercase;
 /*in case animation does weirds motions, 
 the backface-visibility property helps to fix it*/
 		backface-visibility: hidden;
 		margin-bottom: 60px;
 }

 .heading-primary-main {
 	display: block;
 	font-size: 40px;
 	font-weight: 400;
 	letter-spacing: 25px;

 	animation-name: moveInLeft;
 	animation-duration: 1s;
 	animation-timing-function: ease-out;

 	/*animation-delay: 3s;
 	animation-iteration-count: 3; 	-plays the animation 3times
	animation-timing-function: ease-in;	 -it starts slower and then in the end of animation goes faster
 	*/
 }
/*to make the animation work it needs the animation-name
and animation-duration*/

 .heading-primary-sub {
 	display: block;
 	font-size: 16px;
 	font-weight: 700;
 	letter-spacing: 14px;
 	animation: moveInRight 1s ease-out;
 }
/*instead specifying all the parameters separately, animation can be used//
//1animation name
//animation duration
//animation ease-ut/in
4th is animation delay*/

#btn {
	color: #69e078;
}

 @keyframes moveInLeft {
 	0% {
 		opacity: 0;
 		transform: translateX(-100px);
 	}
/*60%{ transform: rotate(120deg); }		another animation feature*/
 	80% {
 		transform: translateX(10px);
 	}

 	100% {
 		opacity: 1;
 		transform: translate(0);
 	}
 }
 /*keyframes procents show the part of the full animation cycle
 the start of it is 0% and it can have several steps in between
 as 30, 50, 70, 80 etc
 translate(X) moves the element, if -100 then it moves it left-100
 possebilities for properties
 animation-delay when page loads, it waits examp 3s*/

 @keyframes moveInRight {
 	0% {
 		opacity: 0;
 		transform: translateX(100px);
 	}

 	80% {
 		transform: translateX(-10px);
 	}

 	100% {
 		opacity: 1;
 		transform: translate(0);
 	}
 }

@keyframes moveInBottom {
 	0% {
 		opacity: 0;
 		transform: translateY(30px);
 	}
	100% {
 		opacity: 1;
 		transform: translate(0);
 	}
 }

 .btn:link,
 .btn:visited {
 	text-transform: uppercase;
 	text-decoration: none;
 	padding: 15px 40px;
 	display: inline-block;
 	border-radius: 100px;
 	transition: all .2s;
 	position: relative;

 }

 .btn:hover {
 	transform: translateY(-3px);
 	box-shadow: 0 10px 20px rgba(0,0,0,.2); /*0 is x; 10 is y, 20 is the blur*/
 }

 .btn:active {
 	transform: translateY(-1px);
 	box-shadow: 0 5px 10px rgba(0,0,0,.2)
 }

 .btn-white {
 	background-color: #fff;
 	color: #777;
 }

 .btn::after {
 	content: "";
 	display: inline-block;
 	height: 100%;
 	width: 100%;
 	border-radius: 100px;
 	position: absolute;
 	top: 0;
 	left: 0;
 	z-index: -1;
 	transition: all .4s;
 }

 .btn-white::after{
 	background-color: #fff;
 }

 .btn:hover::after {
 	transform: scaleX(1.4) scaleY(1.6);
 	opacity: 0;
 }

 .btn-animated {
 	animation: moveInBottom .5s ease-out .75s;
 	animation-fill-mode: backwards;
 }