blob: 577ee35bdfe4ff4196214939a047a2f7dace3d34 [file] [log] [blame]
Unknown8e40a3b2017-07-30 14:47:14 -04001
2@import url("https://fonts.googleapis.com/css?family=Comfortaa:400,700,300|Quattrocento");
3.about-tools ul li, .contact-social-icons ul a li {
4 text-align: center; }
5
6.centered {
7 float: none;
8 margin-left: auto;
9 margin-right: auto; }
10
11.break {
12 clear: both;
13 margin-top: 10px; }
14
15@media (min-width: 768px) {
16 .pull-right-sm {
17 float: right !important; }
18
19 .pull-left-sm {
20 float: left !important; } }
21@media (min-width: 992px) {
22 .pull-right-md {
23 float: right !important; }
24
25 .pull-left-md {
26 float: left !important; } }
27@media (min-width: 1200px) {
28 .pull-right-lg {
29 float: right !important; }
30
31 .pull-left-lg {
32 float: left !important; } }
33* {
34 box-sizing: border-box; }
35
36html {
37 position: relative;
Henri Koivuneva7edca392017-08-12 16:23:52 +030038 height: 100%;
39 width: 100%; }
Unknown8e40a3b2017-07-30 14:47:14 -040040
41img {
42 width: 100%; }
43
44body {
45 height: 100%;
46 font-family: "Comfortaa", Helvetica, Arial, sans-serif;
Henri Koivuneva468d1692017-08-12 16:24:41 +030047 line-height: 1.4;
Unknown8e40a3b2017-07-30 14:47:14 -040048 background-color: #0080ff;
49 /* Margin bottom by footer height */
50 margin-bottom: 60px; }
51
Henri Koivuneva468d1692017-08-12 16:24:41 +030052h1, .h1,
53h2, .h2,
54h3, .h3,
55h4, .h4,
56h5, .h5,
57h6, .h6 {
Unknown8e40a3b2017-07-30 14:47:14 -040058 font-family: "Comfortaa", Helvetica, Arial, sans-serif;
Henri Koivuneva468d1692017-08-12 16:24:41 +030059 line-height: 1.4;
Unknown8e40a3b2017-07-30 14:47:14 -040060 color: #07374a; }
61
62p {
63 font-family: "Comfortaa", sans-serif;
64 color: #ffffff; }
65
Henri Koivuneva0f988192017-08-12 15:28:05 +030066a, .btn {
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +030067 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
68 transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
Henri Koivuneva0f988192017-08-12 15:28:05 +030069}
70
Henri Koivuneva7f266022017-08-12 15:25:19 +030071a:hover, a:focus, a:active {text-decoration: none;}
72
Unknown8e40a3b2017-07-30 14:47:14 -040073body > .container-fluid {
Henri Koivuneva7edca392017-08-12 16:23:52 +030074 padding: 60px 0; }
75
Henri Koivunevaf63e2a92017-08-12 16:37:49 +030076#portfolio > .container {
77 padding-left: 0;
78 padding-right: 0 }
79
Henri Koivunevabcf672a2017-08-12 16:25:03 +030080.row,
81.container-fluid>.navbar-collapse,
82.container-fluid>.navbar-header,
83.container>.navbar-collapse,
84.container>.navbar-header {
Henri Koivuneva17653c52017-08-12 18:12:07 +030085 margin:auto;
86}
Unknown8e40a3b2017-07-30 14:47:14 -040087
88.container-fluid .text-muted {
89 margin: 20px 0; }
90
91.btn:focus, a:focus {
92 outline: none !important; }
93
94.navbar {
95 height: 70px;
96 background-color: transparent;
97 background: transparent;
98 border: none;
99 color: #ffffff;
100 z-index: 100;
101 margin-bottom: 0;
102 border-radius: 0;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300103 -webkit-transition: background-color .2s ease 0s;
104 transition: background-color .2s ease 0s; }
Unknown8e40a3b2017-07-30 14:47:14 -0400105
106.navbar-brand {
107 display: none;
108 margin-top: 10px;
109 color: #ffffff;
110 font-weight: 400; }
111
112.navbar-default .navbar-nav > li > a {
113 color: #ffffff;
114 font-weight: 500;
115 font-size: 1em;
116 text-transform: lowercase;
Henri Koivunevac93da972017-08-12 15:18:06 +0300117 margin: 9px 5px 5px 5px;
118 border: 1px solid transparent;
Henri Koivuneva4d964cb2017-08-12 15:22:55 +0300119 border-radius: 5px;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300120 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
121 transition: color .2s ease 0s, border-color .2s ease 0s; }
Henri Koivunevabcf672a2017-08-12 16:25:03 +0300122 .navbar-default .navbar-nav > li:last-child > a {margin-right: 0}
Henri Koivunevac93da972017-08-12 15:18:06 +0300123.navbar-default .navbar-nav > li > a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400124 color: #ffffff;
125 border: 1px solid #ffffff; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300126.navbar-default .navbar-nav > li > a:active,
127.navbar-default .navbar-nav > li > a:focus,
128.navbar.solid .navbar-nav > li > a:active, .navbar.solid .navbar-nav > li > a:focus {
129 color: rgba(255,255,255,0.8);
130 border: 1px solid rgba(255,255,255,0.8); }
Unknown8e40a3b2017-07-30 14:47:14 -0400131.navbar-default .navbar-nav > li > a:visited {
132 color: #ffffff;
133 text-decoration: none; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300134.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400135 background-color: transparent;
136 color: #ffffff; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300137.navbar-default .navbar-nav > .active > a:focus,
138.navbar.solid .navbar-nav > li > a:active,
139.navbar.solid .navbar-nav > li > a:focus {
140 background-color: transparent;
141 color: rgba(255,255,255,0.8); }
Henri Koivuneva0752d232017-08-12 18:08:32 +0300142.navbar-toggle {margin-right:0;}
Unknown8e40a3b2017-07-30 14:47:14 -0400143.navbar-default .navbar-toggle {
144 border-color: #ffffff; }
145 .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
Henri Koivuneva17653c52017-08-12 18:12:07 +0300146 background-color: #07374a;
147 }
Unknown8e40a3b2017-07-30 14:47:14 -0400148 .navbar-default .navbar-toggle .icon-bar {
149 color: #ffffff;
150 background-color: #ffffff; }
Henri Koivuneva0752d232017-08-12 18:08:32 +0300151.navbar-default .navbar-collapse.collapse.in ul, .navbar-collapse {
Henri Koivuneva17653c52017-08-12 18:12:07 +0300152 background-color: #07374a;
153}
154.navbar-collapse.collapse.collapsing {
155 background-color: #07374a;
156
157}
158
159 .navbar-collapse.collapse.show {
160 background-color: #07374a;
161 -webkit-transition: background-color .2s ease 0s;
162 transition: background-color .2s ease 0s;
163}
Unknown8e40a3b2017-07-30 14:47:14 -0400164
165/* Solid class attached on scroll past first section */
166.navbar.solid {
167 background-color: #07374a;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300168 -webkit-transition: background-color .2s ease 0s;
169 transition: background-color .2s ease 0s;
Unknown8e40a3b2017-07-30 14:47:14 -0400170 box-shadow: 0 0 4px rgba(7, 55, 74, 0.2); }
171 .navbar.solid .navbar-brand {
172 display: inline-block;
173 color: #ffffff;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300174 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
175 transition: color .2s ease 0s, border-color .2s ease 0s; }
Unknown8e40a3b2017-07-30 14:47:14 -0400176 .navbar.solid .navbar-nav > li > a {
177 color: #ffffff;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300178 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
179 transition: color .2s ease 0s, border-color .2s ease 0s; }
Unknown8e40a3b2017-07-30 14:47:14 -0400180
181.cover {
182 padding: 10% 0 10% 0; }
183 .cover.top {
Henri Koivuneva0752d232017-08-12 18:08:32 +0300184 padding: 10vh 0 15vh 0;
Unknown8e40a3b2017-07-30 14:47:14 -0400185 height: 100vh;
186 display: -webkit-box;
187 display: -ms-flexbox;
188 display: flex;
189 background-color: #0080ff; }
190 .cover.bottom {
191 padding: 10% 0 10% 0; }
192
193.headline {
194 padding-top: 6.25em; }
Henri Koivuneva0752d232017-08-12 18:08:32 +0300195 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {
196 max-width: 100%;
197 width: auto;
198 margin: 0 auto;
199 display: block; }
Unknown8e40a3b2017-07-30 14:47:14 -0400200 @media screen and (min-width: 768px) {
201 .headline {
202 padding-top: 3.75em; } }
203 @media screen and (min-width: 992px) {
204 .headline {
205 padding-top: 1.5625em; } }
206 @media screen and (min-width: 1200px) {
207 .headline {
208 padding-top: 0px; } }
209
210#about {
211 background-color: #07374a; }
212 #about h2 {
213 color: #0080ff; }
214
215.profile-img {
216 margin-bottom: 15px;
217 width: 120px; }
218
219.about, .about-info, .about-tools, .about-last {
Henri Koivuneva67b58702017-08-12 16:38:47 +0300220 padding: 4% 6% 1% 6%;
Unknown8e40a3b2017-07-30 14:47:14 -0400221 font-size: 1.25em; }
222 .about-tools {
223 padding-top: 4.375em;
224 font-weight: 700;
225 font-size: 1.25em; }
226 @media screen and (min-width: 992px) {
227 .about-tools {
228 padding-top: 5.625em; } }
229 .about-tools ul:first-child {
230 padding-left: 0px; }
231 .about-tools ul {
232 color: #0080ff;
233 list-style: none; }
234 .about-tools ul li {
235 padding-top: 0.75em; }
236 .about-last {
237 padding-top: 3.125em;
238 padding-bottom: 0;
239 font-size: 1.125em; }
240 @media screen and (min-width: 992px) {
241 .about-last {
242 padding-top: 0; } }
243 .about-last p {
244 color: #0080ff; }
245
246#portfolio {
247 background-color: #0080ff; }
248 #portfolio h2 {
249 padding-bottom: 1.25em; }
250
251@media screen and (min-width: 768px) {
252 .portfolio-projects {
253 margin-top: 0.625em; } }
254.portfolio-projects--title {
255 margin-top: 0.9375em; }
256 @media screen and (min-width: 768px) {
257 .portfolio-projects--title {
258 margin-top: 20%; } }
259 @media screen and (min-width: 1200px) {
260 .portfolio-projects--title {
Henri Koivuneva9a118552017-08-12 17:11:54 +0300261 margin-top: 5%; }
262 .portfolio-projects .col-lg-6 + .col-lg-6 + .col-lg-6 {margin-top:40px} }
Unknown8e40a3b2017-07-30 14:47:14 -0400263@media screen and (min-width: 768px) {
264 .portfolio-projects--desc {
265 margin-top: 10%;
266 margin-bottom: 10%; } }
267.portfolio-projects--btn {
268 background: transparent;
269 color: #07374a;
270 border: 1px solid #07374a;
271 border-radius: 5px;
272 margin-bottom: 1.25em; }
273 .portfolio-projects--btn:hover {
274 background: #07374a;
275 color: #ffffff; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300276 .portfolio-projects--btn:focus,
277 .portfolio-projects--btn:active {
278 background: #052a38;
279 color: #ffffff; }
Unknown8e40a3b2017-07-30 14:47:14 -0400280.portfolio-projects--image {
281 margin-bottom: 1.875em;
282 padding-top: 5%; }
283
284#contact {
285 background-color: #07374a; }
286 #contact h2 {
287 color: #0080ff; }
288
289.contact-social-icons p {
290 color: #0080ff; }
291.contact-social-icons ul a {
292 color: #0080ff;
293 list-style: none; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300294 .contact-social-icons ul a:hover,
295 .team-links-list a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400296 color: #ffffff; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300297 .contact-social-icons ul a:focus,
298 .contact-social-icons ul a:active,
299 .team-links-list a:focus,
300 .team-links-list a:active {
301 color: rgba(255,255,255,0.8); }
Unknown8e40a3b2017-07-30 14:47:14 -0400302 .contact-social-icons ul a li {
303 display: inline-block;
304 padding: 2%; }
305
306.footer {
307 bottom: 0;
308 width: 100%;
309 /* Set the fixed height of the footer here */
310 height: 30px;
311 background-color: #07374a;
312 color: #ffffff; }
313
314#scrollIcon, #scrollTopIcon {
315 margin-top: 200px;
316 padding: 10px;
317 font-size: 1.5em;
318 color: #07374a;
319 border: solid 2px #07374a;
320 border-radius: 50%; }
321
322#scrollTopIcon {
323 margin-top: 10px;
324 font-size: 1em;
325 color: #ffffff;
326 border-color: #ffffff; }
327
328.back-to-top {
329 display: none; }
330 .back-to-top.visible {
331 display: block; }
Unknown423f0342017-07-30 16:44:34 -0400332
333/* our team section */
Unknown284cf502017-08-01 21:04:50 -0400334#team {
Unknown4f1903e2017-07-30 19:40:03 -0400335 background-color: #0080ff;
Unknown284cf502017-08-01 21:04:50 -0400336 font-weight: 700;
Unknown4f1903e2017-07-30 19:40:03 -0400337 font-size: 1.5em;
Unknown423f0342017-07-30 16:44:34 -0400338}
339.hr.invisible_hr {
340 height: 0;
341 padding: 0;
342}
343.hr.big_size_hr {
344 margin: 30px 0;
345}
346.hr {
347 clear: both;
348 display: block;
349 font-size: 0;
350 height: 24px;
351 margin: 20px 0;
352 overflow: hidden;
353 padding: 2px 0;
354 position: relative;
355 text-align: center;
356 width: 100%;
357}
358.highlight_secondary {
359 color: #FFFFFF;
360}
Henri Koivuneva984bf522017-08-12 14:51:57 +0300361.team-role, .team-name, .team-links-list a {
Unknown423f0342017-07-30 16:44:34 -0400362 color: #07374a;
Unknown4f1903e2017-07-30 19:40:03 -0400363}
364.team-links {
365 padding-top: .75em;
Henri Koivuneva984bf522017-08-12 14:51:57 +0300366}
Henri Koivunevac5e99ce2017-08-12 15:59:30 +0300367.team-image img {
368 max-width:150px;
369 max-height: 150px;
370 margin:0 auto;
Henri Koivuneva4c866502017-08-12 17:14:37 +0300371}
Henri Koivuneva0752d232017-08-12 18:08:32 +0300372
373@media (max-height: 880px) {
374 #scrollIcon, #scrollTopIcon {margin-top: 15vh}
375}
376@media (max-height: 800px) {
377 #scrollIcon, #scrollTopIcon {margin-top: 10vh}
378 .cover.top {padding: 7.5vh 0 12.5vh 0;}
379}
380@media (max-height: 750px) {
381 #scrollIcon, #scrollTopIcon {margin-top: 8vh}
382}
383@media (max-height: 720px) {
384 #scrollIcon, #scrollTopIcon {margin-top: 5vh}
385 .cover.top {padding: 5vh 0 10vh 0;}
386}
387@media (max-height: 650px) {
388 #scrollIcon, #scrollTopIcon {margin-top: 5vh}
389 .cover.top {padding: 2.5vh 0 5vh 0;}
390 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 42vh;}
391}
392@media (max-height: 550px) {
393 #scrollIcon, #scrollTopIcon {margin-top: 5vh}
394 .cover.top {padding: 1.5vh 0 3vh 0;}
395 .headline {padding-top:3vh;}
396 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
397}
398@media (max-height: 480px) {
399 #scrollIcon, #scrollTopIcon {margin-top: 0}
400 .cover.top {padding: 0vh 0 3vh 0;}
401 .headline {padding-top:1.5vh;}
402 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
403}
404@media (max-width: 768px) {
405 .container-fluid {padding:30px 0 !important;}
406 .h1, .h2, .h3, h1, h2, h3 {
407 margin-top: 10px;
408 margin-bottom: 10px;
409 }
410 .lead, .about, .about-info, .about-tools, .about-last {font-size: 16px}
411 .about-info {padding: 0% 6% 0% 6%;}
412 .row.cover.top .lead {
413 max-width: 350px;
414 margin-left:auto;
415 margin-right: auto
416 }
417 .h4, h4 {font-size: 20px}
418 #portfolio h2 {padding-bottom: 0}
419 .portfolio-projects--btn {margin-top:1.25em;}
420 #scrollIcon, #scrollTopIcon {font-size: 1em}
421}
422@media (max-width: 360px) {
423 .h1, h1 {font-size: 32px;}
424}