webapp

1
video {
2
  object-fit: cover;
3
  width: 100%;
4
  height: 100%;
5
  position: fixed;
6
  z-index: -1;
7
}
8

9
.hero-container {
10
  /* background: url('/images/img-home.jpg') center center/cover no-repeat; */
11
  height: 100vh;
12
  width: 100%;
13
  display: flex;
14
  flex-direction: column;
15
  justify-content: center;
16
  align-items: center;
17
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2);
18
  object-fit: contain;
19
}
20

21
.hero-container > h1 {
22
  color: #fff;
23
  font-size: 100px;
24
  margin-top: -100px;
25
}
26

27
.hero-container > p {
28
  margin-top: 8px;
29
  color: #fff;
30
  font-size: 32px;
31
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
32
    'Lucida Sans', Arial, sans-serif;
33
}
34

35
.hero-btns {
36
  margin-top: 32px;
37
}
38

39
.hero-btns .btn {
40
  margin: 6px;
41
}
42

43
.fa-play-circle {
44
  margin-left: 4px;
45
}
46

47
@media screen and (max-width: 960px) {
48
  .hero-container > h1 {
49
    font-size: 70px;
50
    margin-top: -150px;
51
  }
52
}
53

54
@media screen and (max-width: 768px) {
55
  .hero-container > h1 {
56
    font-size: 50px;
57
    margin-top: -100px;
58
  }
59

60
  .hero-container > p {
61
    font-size: 30px;
62
  }
63

64
  .btn-mobile {
65
    display: block;
66
    text-decoration: none;
67
  }
68

69
  .btn {
70
    width: 100%;
71
  }
72
}
73