webapp

1
.footer-container {
2
  background-color: #242424;
3
  padding: 4rem 0 2rem 0;
4
  display: flex;
5
  flex-direction: column;
6
  justify-content: center;
7
  align-items: center;
8
}
9

10
.footer-subscription {
11
  display: flex;
12
  flex-direction: column;
13
  justify-content: center;
14
  align-items: center;
15
  text-align: center;
16

17
  margin-bottom: 24px;
18
  padding: 24px;
19
  color: #fff;
20
}
21

22
.footer-subscription > p {
23
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
24
    'Lucida Sans', Arial, sans-serif;
25
}
26

27
.footer-subscription-heading {
28
  margin-bottom: 24px;
29
  font-size: 24px;
30
}
31

32
.footer-subscription-text {
33
  margin-bottom: 24px;
34
  font-size: 20px;
35
}
36

37
.footer-input {
38
  padding: 8px 20px;
39
  border-radius: 2px;
40
  margin-right: 10px;
41
  outline: none;
42
  border: none;
43
  font-size: 18px;
44
  margin-bottom: 16px;
45
  border: 1px solid #fff;
46
}
47

48
.footer-links {
49
  width: 100%;
50
  max-width: 1000px;
51
  display: flex;
52
  justify-content: center;
53
}
54

55
.footer-link-wrapper {
56
  display: flex;
57
}
58

59
.footer-link-items {
60
  display: flex;
61
  flex-direction: column;
62
  align-items: flex-start;
63
  margin: 16px;
64
  text-align: left;
65
  width: 160px;
66
  box-sizing: border-box;
67
}
68

69
.footer-link-items h2 {
70
  margin-bottom: 16px;
71
}
72

73
.footer-link-items > h2 {
74
  color: #fff;
75
}
76

77
.footer-link-items a {
78
  color: #fff;
79
  text-decoration: none;
80
  margin-bottom: 0.5rem;
81
}
82

83
.footer-link-items a:hover {
84
  color: #e9e9e9;
85
  transition: 0.3s ease-out;
86
}
87

88
.footer-email-form h2 {
89
  margin-bottom: 2rem;
90
}
91

92
.footer-input::placeholder {
93
  color: #b1b1b1;
94
}
95

96
/* Social Icons */
97
.social-icon-link {
98
  color: #fff;
99
  font-size: 24px;
100
}
101

102
.social-media {
103
  max-width: 1000px;
104
  width: 100%;
105
}
106

107
.social-media-wrap {
108
  display: flex;
109
  justify-content: space-between;
110
  align-items: center;
111
  width: 90%;
112
  max-width: 1000px;
113
  margin: 40px auto 0 auto;
114
}
115

116
.social-icons {
117
  display: flex;
118
  justify-content: space-between;
119
  align-items: center;
120
  width: 240px;
121
}
122

123
.social-logo {
124
  color: #fff;
125
  justify-self: start;
126
  margin-left: 20px;
127
  cursor: pointer;
128
  text-decoration: none;
129
  font-size: 2rem;
130
  display: flex;
131
  align-items: center;
132
  margin-bottom: 16px;
133
}
134

135
.website-rights {
136
  color: #fff;
137
  margin-bottom: 16px;
138
}
139

140
@media screen and (max-width: 820px) {
141
  .footer-links {
142
    padding-top: 2rem;
143
  }
144

145
  .footer-input {
146
    width: 100%;
147
  }
148

149
  .btn {
150
    width: 100%;
151
  }
152

153
  .footer-link-wrapper {
154
    flex-direction: column;
155
  }
156

157
  .social-media-wrap {
158
    flex-direction: column;
159
  }
160
}
161

162
@media screen and (max-width: 768px) {
163
}
164