1. /*
2. COLORS:
3.  
4. Light green: #7ed56f
5. Medium green: #55c57a
6. Dark green: #28b485
7.  
8. */
9. *
10. *::after,
11. *::before {
12.   margin: 0;
13.   padding: 0;
14.   box-sizing: inherit;
15. }
16.  
17. html {
18.   font-size: 62.5%;
19. }
20.  
21. body {
22.   font-family: "Lato", sans-serif;
23.   font-weight: 400;
24.   /*font-size: 16px; */
25.   line-height: 1.7;
26.   color: #777;
27.   padding: 3rem;
28.   box-sizing: border-box;
29. }
30.  
31. .header {
32.   height: 95vh;
33.   background-image: linear-gradient(to right bottom,
34.     rgba(126, 213, 111, 0.8),
35.     rgba(40, 180, 131, 0.8)),
36.     url(../img/hero.jpg);
37.   background-size: cover;
38.   background-position: top;
39.   -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 100% 75%, 0 100%);
40.   clip-path: polygon(0 0, 100% 0, 100% 0, 100% 75%, 0 100%);
41.   position: relative;
42. }
43.  
44. .header__logo-box {
45.   position: absolute;
46.   top: 4rem;
47.   left: 4rem;
48. }
49.  
50. .header__logo {
51.   height: 3.5rem;
52. }
53.  
54. .header__text-box {
55.   position: absolute;
56.   top: 40%;
57.   left: 50%;
58.   transform: translate(-50%, -50%);
59.   text-align: center;
60. }
61.  
62. .heading-primary {
63.   color: #fff;
64.   text-transform: uppercase;
65.   backface-visibility: hidden;
66.   margin-bottom: 6rem;
67. }
68.  
69. .heading-primary--main {
70.   display: block;
71.   font-size: 6rem;
72.   font-weight: 400;
73.   letter-spacing: 3.5rem;
74.   animation-name: moveInLeft;
75.   animation-duration: 1s;
76.   animation-timing-function: ease-out;
77.   /*
78.   animation-iteration-count: 3;
79.   animation-delay: 3s;
80.   */
81. }
82.  
83. .heading-primary--sub {
84.   display: block;
85.   font-size: 2rem;
86.   font-weight: 700;
87.   letter-spacing: 1.75rem;
88.   animation: moveInRight 1s ease-out;
89.   /*
90.   animation-iteration-count: 3;
91.   animation-delay: 3s;
92.   */
93. }
94.  
95. @keyframes moveInLeft {
96.   0% {
97.     opacity: 0;
98.     transform: translateX(-10rem);
99.   }
100.  
101.   80% {
102.     transform: translateX(1rem);
103.   }
104.  
105.   100% {
106.     opacity: 1;
107.     transform: translate(0);
108.   }
109. }
110.  
111. @keyframes moveInRight {
112.   0% {
113.     opacity: 0;
114.     transform: translateX(10rem);
115.   }
116.  
117.   80% {
118.     transform: translateX(-1rem);
119.   }
120.  
121.   100% {
122.     opacity: 1;
123.     transform: translate(0);
124.   }
125. }
126.  
127. @keyframes moveInBottom {
128.   0% {
129.     opacity: 0;
130.     transform: translateY(3rem);
131.   }
132.  
133.   100% {
134.     opacity: 1;
135.     transform: translate(0);
136.   }
137. }
138.  
139. .btn:link,
140. .btn:visited {
141.   text-transform: uppercase;
142.   text-decoration: none;
143.   padding: 1.5rem 4rem;
144.   display: inline-block;
145.   border-radius: 10rem;
146.   transition: all .2s;
147.   position: relative;
148.   font-size: 1.6rem;
149. }
150.  
151. .btn:hover {
152.   transform: translateY(-3px);
153.   box-shadow: 0 1rem 2rem rgba(0, 0, 0, .2);
154. }
155.  
156. .btn:active {
157.   transform: translateY(-1px);
158.   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
159. }
160.  
161. .btn--white {
162.   background-color: #fff;
163.   color: #777;
164. }
165.  
166. .btn::after {
167.   content: "";
168.   display: inline-block;
169.   height: 100%;
170.   width: 100%;
171.   border-radius: 100px;
172.   position: absolute;
173.   top: 0;
174.   left: 0;
175.   z-index: -1;
176.   transition: all .4s;
177. }
178.  
179. .btn--white::after {
180.   background-color: #fff;
181. }
182.  
183. .btn:hover::after {
184.   transform: scaleX(1.4) scaleY(1.5);
185.   opacity: 0;
186. }
187.  
188. .btn--animated {
189.   animation: moveInBottom .5s ease-out .75s;
190.   animation-fill-mode: backwards;
191. }
192.