blob: 74292f996208d169bcf2e5ea12813a0dbeb5b4a8 [file] [log] [blame]
Unknown8e40a3b2017-07-30 14:47:14 -04001img {
2 width: 100%; }
3
4body {
Unknown8e40a3b2017-07-30 14:47:14 -04005 font-family: "Comfortaa", Helvetica, Arial, sans-serif;
Henri Koivuneva468d1692017-08-12 16:24:41 +03006 line-height: 1.4;
Unknown62c1a402018-10-02 10:32:07 -04007 /* background-color: #0080ff; */
8 background: url("../images/web_bg_1280.png") no-repeat center center fixed;
9 -webkit-background-size: cover;
10 -moz-background-size: cover;
11 -o-background-size: cover;
12 background-size: cover;
Unknownebf3b8e2018-10-02 10:56:52 -040013 /* Preserve aspet ratio */
14 min-width: 100%;
15 min-height: 100%;
16 background-attachment: fixed;
Henri Koivuneva5c411dd2017-08-25 22:59:59 +030017 }
Unknown8e40a3b2017-07-30 14:47:14 -040018
Unknown62c1a402018-10-02 10:32:07 -040019#bg {
20 position: fixed;
21 top: -50%;
22 left: -50%;
23 width: 200%;
24 height: 200%;
25}
26#bg img {
27 position: absolute;
28 top: 0;
29 left: 0;
30 right: 0;
31 bottom: 0;
32 margin: auto;
33 min-width: 50%;
34 min-height: 50%;
35}
36
Henri Koivuneva468d1692017-08-12 16:24:41 +030037h1, .h1,
38h2, .h2,
39h3, .h3,
40h4, .h4,
41h5, .h5,
42h6, .h6 {
Unknown8e40a3b2017-07-30 14:47:14 -040043 font-family: "Comfortaa", Helvetica, Arial, sans-serif;
Henri Koivuneva468d1692017-08-12 16:24:41 +030044 line-height: 1.4;
Unknowna2d54432018-10-02 09:15:22 -040045 color: #222222; }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +030046h1, .h1 {font-size: 64px;}
47h2, .h2 {font-size: 42px;}
48h4, .h4 {font-weight: bolder;}
Unknown8e40a3b2017-07-30 14:47:14 -040049
50p {
51 font-family: "Comfortaa", sans-serif;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +030052 color: #ffffff;
53 margin: 0 0 30px; }
Unknown8e40a3b2017-07-30 14:47:14 -040054
Henri Koivuneva0f988192017-08-12 15:28:05 +030055a, .btn {
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +030056 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +020057 -moz-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
58 -o-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +030059 transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
Henri Koivuneva0f988192017-08-12 15:28:05 +030060}
61
Henri Koivuneva7f266022017-08-12 15:25:19 +030062a:hover, a:focus, a:active {text-decoration: none;}
63
Unknown8e40a3b2017-07-30 14:47:14 -040064body > .container-fluid {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +030065 padding: 0; }
Henri Koivuneva7edca392017-08-12 16:23:52 +030066
Henri Koivunevaf63e2a92017-08-12 16:37:49 +030067#portfolio > .container {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +030068 padding-left: 30px;
69 padding-right: 30px;
70}
71#portfolio > div > div > div {padding-right: 0;padding-left: 0}
Henri Koivunevaf63e2a92017-08-12 16:37:49 +030072
Unknowne3cf16e2017-11-04 16:32:52 -040073#family-lt > .container {
74 padding-left: 30px;
75 padding-right: 30px;
Unknownb60d9422017-11-27 19:40:08 -050076 font-size: 18px;
Unknowne3cf16e2017-11-04 16:32:52 -040077}
78#family-lt > div > div > div {padding-right: 0;padding-left: 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;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300102 padding-left: 30px;
103 padding-right: 30px;
Unknown8e40a3b2017-07-30 14:47:14 -0400104 border-radius: 0;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300105 -webkit-transition: background-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200106 -moz-transition: background-color .2s ease 0s;
107 -o-transition: background-color .2s ease 0s;
Unknown2e345c42017-08-14 18:25:38 -0400108 transition: background-color .2s ease 0s; }
Henri Koivuneva3de908d2017-08-13 02:43:42 +0300109.navbar > .container {padding: 4px 0 0 0;width: 100%;margin-top:2px;}
Unknown8e40a3b2017-07-30 14:47:14 -0400110.navbar-brand {
Henri Koivunevae1841232017-08-12 21:55:21 +0300111 opacity: 0;
Henri Koivuneva3de908d2017-08-13 02:43:42 +0300112 margin-top: 5px;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300113 padding: 15px 0;
Unknown8e40a3b2017-07-30 14:47:14 -0400114 color: #ffffff;
115 font-weight: 400; }
116
117.navbar-default .navbar-nav > li > a {
118 color: #ffffff;
119 font-weight: 500;
120 font-size: 1em;
121 text-transform: lowercase;
Henri Koivuneva3de908d2017-08-13 02:43:42 +0300122 margin: 3px 5px;
Henri Koivunevac93da972017-08-12 15:18:06 +0300123 border: 1px solid transparent;
Henri Koivuneva4d964cb2017-08-12 15:22:55 +0300124 border-radius: 5px;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300125 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200126 -moz-transition: color .2s ease 0s, border-color .2s ease 0s;
127 -o-transition: color .2s ease 0s, border-color .2s ease 0s;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300128 transition: color .2s ease 0s, border-color .2s ease 0s; }
Henri Koivunevabcf672a2017-08-12 16:25:03 +0300129 .navbar-default .navbar-nav > li:last-child > a {margin-right: 0}
Henri Koivunevac93da972017-08-12 15:18:06 +0300130.navbar-default .navbar-nav > li > a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400131 color: #ffffff;
132 border: 1px solid #ffffff; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300133.navbar-default .navbar-nav > li > a:active,
134.navbar-default .navbar-nav > li > a:focus,
135.navbar.solid .navbar-nav > li > a:active, .navbar.solid .navbar-nav > li > a:focus {
136 color: rgba(255,255,255,0.8);
137 border: 1px solid rgba(255,255,255,0.8); }
Unknown8e40a3b2017-07-30 14:47:14 -0400138.navbar-default .navbar-nav > li > a:visited {
139 color: #ffffff;
140 text-decoration: none; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300141.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400142 background-color: transparent;
143 color: #ffffff; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300144.navbar-default .navbar-nav > .active > a:focus,
145.navbar.solid .navbar-nav > li > a:active,
146.navbar.solid .navbar-nav > li > a:focus {
147 background-color: transparent;
148 color: rgba(255,255,255,0.8); }
Henri Koivuneva60a08562017-11-23 00:43:58 +0200149.navbar-toggle {margin-right:0;padding:15px;}
Unknown8e40a3b2017-07-30 14:47:14 -0400150.navbar-default .navbar-toggle {
151 border-color: #ffffff; }
152 .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
Unknowna2d54432018-10-02 09:15:22 -0400153 background-color: #222222;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300154 }
Unknown8e40a3b2017-07-30 14:47:14 -0400155 .navbar-default .navbar-toggle .icon-bar {
156 color: #ffffff;
157 background-color: #ffffff; }
Henri Koivuneva6b7c7962017-08-12 21:54:58 +0300158.navbar-default .navbar-collapse.collapse.in ul {
Unknowna2d54432018-10-02 09:15:22 -0400159 background-color: #222222;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300160}
Henri Koivuneva6b7c7962017-08-12 21:54:58 +0300161.navbar-collapse.collapsing {
Unknowna2d54432018-10-02 09:15:22 -0400162 background-color: #222222;
Henri Koivuneva5e6ed7a2017-08-12 18:14:02 +0300163}
164.navbar-default .navbar-toggle .icon-bar {
165 color: #ffffff;
166 background-color: #ffffff; }
Unknown8e40a3b2017-07-30 14:47:14 -0400167.navbar-default .navbar-collapse.collapse.in ul {
Unknowna2d54432018-10-02 09:15:22 -0400168 background-color: #222222;
Henri Koivuneva5e6ed7a2017-08-12 18:14:02 +0300169}
Unknown94e4caa2017-08-12 10:48:07 -0400170.navbar-collapse.collapse.collapsing {
Unknowna2d54432018-10-02 09:15:22 -0400171 background-color: #222222;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300172}
nilac8991c1655032017-08-19 12:37:44 +0200173
Henri Koivuneva5e6ed7a2017-08-12 18:14:02 +0300174.navbar-collapse.collapse.show {
Unknowna2d54432018-10-02 09:15:22 -0400175 background-color: #222222;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300176 -webkit-transition: background-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200177 -moz-transition: background-color .2s ease 0s;
178 -o-transition: background-color .2s ease 0s;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300179 transition: background-color .2s ease 0s;
Henri Koivunevae15afea2017-08-12 18:23:45 +0300180 -webkit-border-bottom-left-radius: 4px;
181 -webkit-border-bottom-right-radius: 4px;
182 border-bottom-left-radius: 4px;
183 border-bottom-right-radius: 4px;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300184}
Henri Koivuneva936cb392017-08-12 18:49:20 +0300185
186.navbar-collapse .navbar-nav > li > a,
187.navbar-collapse .navbar-nav > li > a:hover,
188.navbar-collapse .navbar-nav > li > a:focus,
189.navbar-collapse .navbar-nav > li > a:active {
190 border-color: transparent !important;
191}
192
Unknown8e40a3b2017-07-30 14:47:14 -0400193/* Solid class attached on scroll past first section */
194.navbar.solid {
Unknowna2d54432018-10-02 09:15:22 -0400195 background-color: #222222;
Unknown2e345c42017-08-14 18:25:38 -0400196 top: 0;
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300197 width: 100%;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200198 margin: 0;
199 box-shadow: 0 7px 8px 0 rgba(0,0,0,0.3);
200 -webkit-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
201 -moz-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
202 -o-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
203 transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300204 }
Unknown8e40a3b2017-07-30 14:47:14 -0400205 .navbar.solid .navbar-brand {
Henri Koivunevae1841232017-08-12 21:55:21 +0300206 opacity: 1;
Unknown8e40a3b2017-07-30 14:47:14 -0400207 display: inline-block;
208 color: #ffffff;
Henri Koivunevae1841232017-08-12 21:55:21 +0300209 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200210 -moz-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
211 -o-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
Henri Koivunevae1841232017-08-12 21:55:21 +0300212 transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s; }
Unknown8e40a3b2017-07-30 14:47:14 -0400213 .navbar.solid .navbar-nav > li > a {
214 color: #ffffff;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300215 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200216 -moz-transition: color .2s ease 0s, border-color .2s ease 0s;
217 -o-transition: color .2s ease 0s, border-color .2s ease 0s;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300218 transition: color .2s ease 0s, border-color .2s ease 0s; }
Unknown8e40a3b2017-07-30 14:47:14 -0400219
220.cover {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300221 padding: 6% 0 8% 0; }
Unknown8e40a3b2017-07-30 14:47:14 -0400222 .cover.top {
Henri Koivuneva0752d232017-08-12 18:08:32 +0300223 padding: 10vh 0 15vh 0;
Unknown8e40a3b2017-07-30 14:47:14 -0400224 height: 100vh;
225 display: -webkit-box;
226 display: -ms-flexbox;
227 display: flex;
Unknown62c1a402018-10-02 10:32:07 -0400228 /* background-color: #0080ff;*/
229 background: url(images/web_bg_1280.png) no-repeat center center fixed;
230 -webkit-background-size: cover;
231 -moz-background-size: cover;
232 -o-background-size: cover;
233 background-size: cover;
234 }
Unknown8e40a3b2017-07-30 14:47:14 -0400235 .cover.bottom {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300236 padding: 6% 0 5.5% 0; }
237 body > .cover.bottom:nth-child(4) {padding: 6% 0 5.5% 0 !important}
Henri Koivuneva04797472017-08-12 18:35:39 +0300238 @media (max-width: 550px) {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300239 .cover, .cover.bottom {padding: 17.5% 30px 17.5% 30px; } }
Unknown8e40a3b2017-07-30 14:47:14 -0400240
241.headline {
242 padding-top: 6.25em; }
Henri Koivuneva0752d232017-08-12 18:08:32 +0300243 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300244 max-width: 1600px;
245 width: 100%;
Henri Koivuneva0752d232017-08-12 18:08:32 +0300246 margin: 0 auto;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300247 padding-right: 30px;
248 padding-left: 30px;
Henri Koivuneva0752d232017-08-12 18:08:32 +0300249 display: block; }
Unknown8e40a3b2017-07-30 14:47:14 -0400250 @media screen and (min-width: 768px) {
251 .headline {
252 padding-top: 3.75em; } }
253 @media screen and (min-width: 992px) {
254 .headline {
255 padding-top: 1.5625em; } }
256 @media screen and (min-width: 1200px) {
257 .headline {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200258 padding-top: 0; } }
Unknown8e40a3b2017-07-30 14:47:14 -0400259
260#about {
Unknowna2d54432018-10-02 09:15:22 -0400261 background-color: #222222; }
Unknown8e40a3b2017-07-30 14:47:14 -0400262 #about h2 {
263 color: #0080ff; }
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300264 #about > div > div.row.break > div > p {margin-bottom: 15px}
Unknown8e40a3b2017-07-30 14:47:14 -0400265
266.profile-img {
267 margin-bottom: 15px;
268 width: 120px; }
269
270.about, .about-info, .about-tools, .about-last {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300271 padding: 4% 30px 1% 30px;
272 font-size: 18px; }
Unknown8e40a3b2017-07-30 14:47:14 -0400273 .about-tools {
274 padding-top: 4.375em;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300275 font-size: 18px; }
Unknown8e40a3b2017-07-30 14:47:14 -0400276 @media screen and (min-width: 992px) {
277 .about-tools {
278 padding-top: 5.625em; } }
279 .about-tools ul:first-child {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200280 padding-left: 0; }
Unknown8e40a3b2017-07-30 14:47:14 -0400281 .about-tools ul {
282 color: #0080ff;
283 list-style: none; }
284 .about-tools ul li {
285 padding-top: 0.75em; }
286 .about-last {
287 padding-top: 3.125em;
288 padding-bottom: 0;
289 font-size: 1.125em; }
290 @media screen and (min-width: 992px) {
291 .about-last {
292 padding-top: 0; } }
293 .about-last p {
294 color: #0080ff; }
295
296#portfolio {
297 background-color: #0080ff; }
Unknown8e40a3b2017-07-30 14:47:14 -0400298
Unknown8e40a3b2017-07-30 14:47:14 -0400299.portfolio-projects--btn {
300 background: transparent;
Unknowna2d54432018-10-02 09:15:22 -0400301 color: #222222;
302 border: 1px solid #222222;
Unknown8e40a3b2017-07-30 14:47:14 -0400303 border-radius: 5px;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300304 margin-bottom: 1.25em;
305 font-size: 18px;
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200306 margin: 8px; }
Unknown8e40a3b2017-07-30 14:47:14 -0400307 .portfolio-projects--btn:hover {
Unknowna2d54432018-10-02 09:15:22 -0400308 background: #222222;
Unknown8e40a3b2017-07-30 14:47:14 -0400309 color: #ffffff; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300310 .portfolio-projects--btn:focus,
311 .portfolio-projects--btn:active {
Unknowna2d54432018-10-02 09:15:22 -0400312 background: #111111;
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300313 color: #ffffff; }
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200314@media (max-width:650px) {
315 .portfolio-projects--btn {font-size:16px;}
316}
Unknown8e40a3b2017-07-30 14:47:14 -0400317.portfolio-projects--image {
318 margin-bottom: 1.875em;
319 padding-top: 5%; }
320
Henri Koivunevabe19c192017-11-22 22:14:33 +0200321.about-tools ul li, .contact-social-icons ul a li {
322 text-align: center; }
323
324.centered {
325 float: none;
326 margin-left: auto;
327 margin-right: auto; }
328
329
330.vcenter {
331 display: inline-block;
332 vertical-align: middle;
333 float: none; }
334
335.break {
336 clear: both;
337 margin-top: 10px; }
338
339@media (min-width: 360px) {
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300340 #team > .container .row > div {width: 100%;margin: 0;}
341}
342
Henri Koivunevabe19c192017-11-22 22:14:33 +0200343@media (min-width: 768px) {
344 .pull-right-sm {
345 float: right !important; }
346 .pull-left-sm {
347 float: left !important; }
348 .container {width: 768px}
349 .navbar-right {margin-right: 0;}
350 .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {margin-left: 0;padding-left: 15px}
351}
352@media (min-width: 992px) {
353 .pull-right-md {
354 float: right !important; }
355 .pull-left-md {
356 float: left !important; }
357 .container {width: 94%;}
358}
359@media (min-width: 1200px) {
360 .pull-right-lg {
361 float: right !important; }
362 .pull-left-lg {
363 float: left !important; }
364 .container {width: 1170px;}
365 .portfolio-projects .col-lg-6 {width: 100%}
366 .navbar > .container {max-width: 1170px}
367}
368@media (min-width: 1366px) {
369 #portfolio > .container, #about > .row {width: 90%;max-width: 1600px;margin-left:auto;margin-right: auto;}
370 .navbar > .container {max-width: 1170px}
371}
372
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200373@media (max-width:768px) {
374 .portfolio-projects--desc {
375 margin-top: 30px;
376 margin-bottom: 30px;
377 font-size: 16px; }
378}
Henri Koivunevabe19c192017-11-22 22:14:33 +0200379@media (min-width: 768px) {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300380 .portfolio-projects {
381 margin-top: 0.625em; } }
382.portfolio-projects--title {
383 margin-top: 0.9375em;
384 font-size: 20px; }
Henri Koivunevabe19c192017-11-22 22:14:33 +0200385@media (min-width: 768px) {
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200386 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 21px;margin-top:0rem;}
387 .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {font-size: 21px;margin-top:-2.5rem;}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300388 .portfolio-projects--desc {
389 margin-top: 30px;
390 margin-bottom: 30px;
391 font-size: 16px; }
392 .portfolio-projects--btn {font-size: 14px;margin:0 4px 16px 4px;}
393 #portfolio > div > div > div:nth-child(1) > div > div.col-sm-5.text-center,
394 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-7.text-center.pull-right-sm {padding-left:0;}
395 #portfolio > div > div > div:nth-child(1) > div > div.col-sm-7.text-center,
396 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm {padding-right: 0;} }
397 @media screen and (min-width: 992px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200398 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 21px;margin-top:0rem;}
399 .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {font-size: 21px;margin-top:-1.5rem;}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300400 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-left:-8px;}
401 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(5) {margin-right:-8px;} }
402 @media screen and (min-width: 1080px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200403 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 21px;margin-top:3.75rem;}
404 .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {font-size: 21px;margin-top:1.125rem;}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300405 }
406 @media screen and (min-width: 1200px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200407 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 24px;margin-top:2.5rem;}
408 .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {font-size: 24px;margin-top:1.25rem;}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300409 .portfolio-projects--desc {
Henri Koivunevac2503532017-11-23 04:00:26 +0200410 margin-top: 24px;
411 margin-bottom: 24px;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300412 font-size: 18px; }
413 .portfolio-projects .col-lg-6 + .col-lg-6 + .col-lg-6 {margin-top:40px}
Henri Koivunevac2503532017-11-23 04:00:26 +0200414 .portfolio-projects--btn {font-size: 18px;margin:8px;} }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300415 @media screen and (min-width: 1366px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200416 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {margin-top:7.5rem;}
417 .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {margin-top:6rem;}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300418 }
419 @media (min-width: 1500px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200420 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 28px;margin-top:11rem;}
421 .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {font-size: 28px;margin-top:9.5rem;}
422 .portfolio-projects--btn {font-size: 18px;}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300423 }
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200424 .portfolio-projects--image-title {margin-top:-3rem;margin-bottom:6rem;}
425 @media (max-width: 768px) {
426 .portfolio-projects--image-title {margin-top:-3rem;margin-bottom:3rem;}
427 }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300428
Unknown8e40a3b2017-07-30 14:47:14 -0400429#contact {
Unknowna2d54432018-10-02 09:15:22 -0400430 background-color: #222222;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300431 padding-left: 15px;
432 padding-right: 15px }
Unknown8e40a3b2017-07-30 14:47:14 -0400433 #contact h2 {
434 color: #0080ff; }
435
436.contact-social-icons p {
437 color: #0080ff; }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300438.contact-social-icons > ul {padding:0;margin:0 auto;}
Unknown8e40a3b2017-07-30 14:47:14 -0400439.contact-social-icons ul a {
440 color: #0080ff;
441 list-style: none; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300442 .contact-social-icons ul a:hover,
Henri Koivunevabef78a62017-08-12 22:32:07 +0300443 .team-links-list a:hover,
444 .family-links-list a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400445 color: #ffffff; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300446 .contact-social-icons ul a:focus,
447 .contact-social-icons ul a:active,
448 .team-links-list a:focus,
Henri Koivunevabef78a62017-08-12 22:32:07 +0300449 .team-links-list a:active,
450 .family-links-list a:focus,
451 .family-links-list a:active {
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300452 color: rgba(255,255,255,0.8); }
Unknown8e40a3b2017-07-30 14:47:14 -0400453 .contact-social-icons ul a li {
454 display: inline-block;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300455 padding: 1.25%;
456 font-size: 16px }
Henri Koivuneva16234182017-08-13 03:09:43 +0300457 @media (max-width: 1200px) {
Henri Koivunevac9c6ac62017-08-13 03:12:28 +0300458 #family > div > div.row > div.center > div {margin:1.5em 4% 3em 4%;width:42%;float:left;}
Henri Koivuneva16234182017-08-13 03:09:43 +0300459 #family > div > div.row > div.center > div:last-child {margin-bottom: 0}
460 }
461 @media (max-width: 720px) {
462 #family > div > div.row > div.center > div {margin:1.5em 4% 3em 4%;width:92%;}
463 }
Unknown8e40a3b2017-07-30 14:47:14 -0400464
465.footer {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300466 padding-top: 1em;
Unknown8e40a3b2017-07-30 14:47:14 -0400467 bottom: 0;
468 width: 100%;
469 /* Set the fixed height of the footer here */
Unknowna2d54432018-10-02 09:15:22 -0400470 background-color: #111111;
Unknownf0310a82017-08-12 19:32:49 -0400471
Unknown8e40a3b2017-07-30 14:47:14 -0400472 color: #ffffff; }
electrikjesus34f27d12017-08-12 17:13:35 -0400473.footer-role, .footer-name, .footer-description {
474 color: #FFFFFF;
475}
476.footer-description {
477 color: #fff;
478 font-size: 18px;
479}
480.footer-role h4, .footer-links-list a {
481 color: #0080ff;
482}
483.footer-header h4 {
484 color: #0080ff;
485}
Unknown8e40a3b2017-07-30 14:47:14 -0400486#scrollIcon, #scrollTopIcon {
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200487 margin-top: 4vh;
Unknown8e40a3b2017-07-30 14:47:14 -0400488 padding: 10px;
489 font-size: 1.5em;
Unknowna2d54432018-10-02 09:15:22 -0400490 color: #222222;
491 border: solid 2px #222222;
Unknown8e40a3b2017-07-30 14:47:14 -0400492 border-radius: 50%; }
493
494#scrollTopIcon {
495 margin-top: 10px;
496 font-size: 1em;
497 color: #ffffff;
498 border-color: #ffffff; }
499
500.back-to-top {
501 display: none; }
502 .back-to-top.visible {
503 display: block; }
Unknown423f0342017-07-30 16:44:34 -0400504
505/* our team section */
Henri Koivunevabef78a62017-08-12 22:32:07 +0300506#team, #family {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300507 background-color: #0080ff;
Unknown2175d332017-08-13 19:28:40 -0400508 /*font-weight: 700;
509 font-size: 21px; */
Unknown423f0342017-07-30 16:44:34 -0400510}
511.hr.invisible_hr {
512 height: 0;
513 padding: 0;
514}
515.hr.big_size_hr {
516 margin: 30px 0;
517}
518.hr {
519 clear: both;
520 display: block;
521 font-size: 0;
522 height: 24px;
523 margin: 20px 0;
524 overflow: hidden;
525 padding: 2px 0;
526 position: relative;
527 text-align: center;
528 width: 100%;
529}
530.highlight_secondary {
531 color: #FFFFFF;
532}
Henri Koivuneva984bf522017-08-12 14:51:57 +0300533.team-role, .team-name, .team-links-list a {
Unknowna2d54432018-10-02 09:15:22 -0400534 color: #222222;
nilac8991c1655032017-08-19 12:37:44 +0200535 text-align: center;
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300536 white-space: normal;
537 width: 100%;
Unknown4f1903e2017-07-30 19:40:03 -0400538}
nilac8991c1655032017-08-19 12:37:44 +0200539.team-name, .family-name {
540 font-size: 21px;
541 text-align: center;
542 white-space: nowrap;
543}
Henri Koivunevabef78a62017-08-12 22:32:07 +0300544.team-links, .family-links {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300545 padding-top: .75em;
Unknowna2d54432018-10-02 09:15:22 -0400546 color: #222222;
nilac8991c1655032017-08-19 12:37:44 +0200547 text-align: center;
Henri Koivuneva984bf522017-08-12 14:51:57 +0300548}
Henri Koivunevabef78a62017-08-12 22:32:07 +0300549.team-image img, .family-image img {
Henri Koivunevac5e99ce2017-08-12 15:59:30 +0300550 max-width:150px;
551 max-height: 150px;
552 margin:0 auto;
Henri Koivuneva4c866502017-08-12 17:14:37 +0300553}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300554#team > .container .row > div {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200555 min-height: 0;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300556 padding-left: 0;
557 padding-right: 0;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300558 /* display: flex; */
559 /* flex-wrap: wrap; */
560 /* justify-content: flex-start; */
561}
562 @media (min-width: 768px) {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200563 #team > .container .row > div {min-height: 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300564 #team .col-sm-4 {
565 width: 100%;
566 margin: 0;
567 }
568 }
569 @media (min-width: 992px) {
570 #team .col-md-2 {
571 width: 100%;
572 margin: 0;
573 }
574 }
575 @media (min-width: 1200px) {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200576 #team > .container .row > div {min-height: 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300577 }
578 @media (max-width: 700px) {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200579 #team > .container .row > div {min-height: 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300580 #team .col-xs-6 {width: 42%;margin:4%;}
581 }
582 @media (max-width: 500px) {
583 #team > .container .row > div {min-height: 250px;}
584 #team .col-xs-6 {width: 92%;margin:4%;}
585 }
586#team > .container .row > .row, #team > .container {padding-left:0;padding-right: 0}
587
588/* Bliss family section */
589#family {
Unknowna2d54432018-10-02 09:15:22 -0400590 background-color: #222222;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300591}
592#family > div > div.row > div {font-size: 18px}
593.family-role, .family-name, .family-description {
594 color: #FFFFFF;
595}
596.family-description {
597 color: #fff;
598 font-size: 18px;
599}
600.family-role h4, .family-links-list a {
601 color: #0080ff;
602}
603.family-header h2 {
604 color: #0080ff;
605}
606#family .about-tools {
607 font-size: 20px;
608}
609.family-image img {
610 max-width:150px;
611 max-height: 150px;
612 margin:0 auto;
613}
614.family-projects--btn {
615 background: transparent;
Unknown7e529f82017-11-04 16:44:32 -0400616 color: #0080ff;
617 border: 1px solid #0080ff;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300618 border-radius: 5px;
619 margin-bottom: 1.25em;
620 font-weight: 700;
621 font-size: 21px; }
622 .family-projects--btn:hover {
Unknown7e529f82017-11-04 16:44:32 -0400623 background: #0080ff;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300624 color: #ffffff; }
625 .family-projects--btn:focus,
626 .family-projects--btn:active {
Unknown7e529f82017-11-04 16:44:32 -0400627 background: #0080ff;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300628 color: #ffffff; }
629
Henri Koivuneva3492c6c2017-11-23 04:45:03 +0200630
631@media (min-height: 880px) {
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200632 #scrollIcon, #scrollTopIcon {margin-top: 4vh;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300633}
Henri Koivuneva3492c6c2017-11-23 04:45:03 +0200634@media (min-height: 900px) {
635 #scrollIcon, #scrollTopIcon {margin-top: 6vh;}
636}
637@media (min-height: 960px) {
638 #scrollIcon, #scrollTopIcon {margin-top: 10vh;}
639}
640@media (min-height: 980px) {
641 #scrollIcon, #scrollTopIcon {margin-top: 12vh;}
642}
643@media (min-height: 1020px) {
644 #scrollIcon, #scrollTopIcon {margin-top: 14vh;}
645}
646@media (min-height: 1090px) {
647 #scrollIcon, #scrollTopIcon {margin-top: 16vh;}
648}
649@media (max-height: 880px) {
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200650 #scrollIcon, #scrollTopIcon {margin-top: 2vh;}
Henri Koivuneva3492c6c2017-11-23 04:45:03 +0200651}
652@media (max-height: 850px) {
653 #scrollIcon, #scrollTopIcon {margin-top: 0vh;}
654}
655@media (max-height: 820px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200656 #scrollIcon, #scrollTopIcon {margin-top: -2vh;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300657 .cover.top {padding: 7.5vh 0 12.5vh 0;}
658}
659@media (max-height: 750px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200660 #scrollIcon, #scrollTopIcon {margin-top: -8vh;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300661}
662@media (max-height: 720px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200663 #scrollIcon, #scrollTopIcon {margin-top: -8vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200664}
665@media (max-height: 690px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200666 #scrollIcon, #scrollTopIcon {margin-top: -10vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200667 .animation {margin-top:-6vh !important;}
668}
669@media (max-height: 670px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200670 #scrollIcon, #scrollTopIcon {margin-top: -14vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200671 .animation {margin-top:-7vh !important;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300672}
673@media (max-height: 650px) {
Henri Koivunevaf259ace2017-11-23 04:28:03 +0200674 #scrollIcon, #scrollTopIcon {margin-top: -14vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200675 .animation {margin-top:-8vh !important;}
676 .cover.top {padding: 6vh 0 5vh 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300677 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 42vh;}
678}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200679@media (max-height: 630px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200680 #scrollIcon, #scrollTopIcon {margin-top: -19vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200681 .animation {margin-top:-10vh !important;}
682 .cover.top {padding: 6vh 0 5vh 0;}
683}
684@media (max-height: 600px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200685 #scrollIcon, #scrollTopIcon {margin-top: -20vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200686 .animation {margin-top:-13vh !important;}
687 .cover.top {padding: 6vh 0 5vh 0;}
688}
Henri Koivunevad27df022017-11-23 05:12:58 +0200689@media (max-height: 600px) and (orientation:landscape) {
690 #scrollIcon, #scrollTopIcon {margin-top: -20vh;display: none;}
691}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300692@media (max-height: 550px) {
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200693 #scrollIcon, #scrollTopIcon {display:none}
694 .cover.top {padding: 6vh 0 3vh 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300695 .headline {padding-top:3vh;}
696 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
697}
698@media (max-height: 480px) {
699 #scrollIcon, #scrollTopIcon {margin-top: 0}
700 .cover.top {padding: 3vh 0 3vh 0;}
701 .headline {padding-top:1.5vh;}
702 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
703}
704@media (max-height: 320px) {
705 .cover.top {padding: 1vh 0 3vh 0;}
706 .headline {padding-top:1vh;}
707 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 25vh;}
708}
709@media (max-width: 768px) {
710 .container-fluid {padding:30px 0 !important;}
711 .h1, .h2, .h3, h1, h2, h3 {
712 margin-top: 10px;
713 margin-bottom: 10px;
714 }
715 .lead, .about, .about-info, .about-tools, .about-last {font-size: 16px}
716 .row.cover.top .lead {
717 max-width: 350px;
718 margin-left:auto;
719 margin-right: auto
720 }
721 .h4, h4 {font-size: 20px}
722 #portfolio h2 {padding-bottom: 0}
723 #portfolio > .container {padding-right: 0;padding-left: 0}
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200724 .portfolio-projects--btn {margin-top:0;margin-left: 4px;margin-right: 4px}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300725 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-right: 4px}
726 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(5) {margin-left: 4px}
Henri Koivunevaf259ace2017-11-23 04:28:03 +0200727 #scrollIcon, #scrollTopIcon {font-size: 1em;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300728}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200729@media (max-width:480px) {.row.cover.top .lead {max-width:180px}}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300730@media (max-device-height: 480px) and (orientation: landscape) {
731 .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
732 max-height: 240px;
733 }
734 .navbar-nav>li>a {
735 padding-top: 6px;
736 padding-bottom: 6px;
737 }
738}
739@media (max-width: 360px) {
740 .h1, h1 {font-size: 32px;}
741 .cover, .cover.bottom {
742 padding-left: 15px;
743 padding-right: 15px;
744 }
745}
746
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300747h1 {
748 color: #fff;
749 cursor: default;
750}
751
752h1 span:nth-of-type(1) {
753 font-size: 1em;
754 line-height: 0.5em;
755}
756h1 span:nth-of-type(2) {
757 font-size: .4em;
758 font-weight: 400;
759 line-height: 3.65em;
760 color: #0080ff;
761 background-color: #282828;
762 padding: 3px 10px;
763 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.6);
764}
765h1 span:nth-of-type(3) {
766 font-size: 1.5em;
767 line-height: .85em;
768}
769
770.space {
771 will-change: transform;
772 position: relative;
773 left:-25;
774 top:auto;
775 bottom:auto;
776 margin-top:15%;
777 margin-bottom:25%;
778 margin-left: 35%;
Henri Koivunevabe19c192017-11-22 22:14:33 +0200779 margin-right: auto;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300780 -webkit-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200781 -moz-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
782 -o-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300783 transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
784 -webkit-transition: all 600ms;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200785 -moz-transition: all 600ms;
786 -o-transition: all 600ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300787 transition: all 600ms;
788}
789
790.space-hover {
791 position: relative;
792 left:-25;
793 top:auto;
794 bottom:auto;
795 margin-top:30%;
796 margin-bottom:25%;
797 margin-left: 45%;
Henri Koivunevabe19c192017-11-22 22:14:33 +0200798 margin-right: auto;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300799 -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200800 -moz-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
801 -o-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300802 transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
803}
804
805.phone-container {
806 width: 11.2em;
807 height: 23.33em;
808 position: absolute;
809 top: 0;
810 bottom: 0;
811 left: 0;
812 right: 0;
813 margin: auto;
814 -webkit-transform-style: preserve-3d;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200815 -moz-transform-style: preserve-3d;
816 -o-transform-style: preserve-3d;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300817 transform-style: preserve-3d;
818 -webkit-transform: translateX(-80%);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200819 -moz-transform: translateX(-80%);
820 -o-transform: translateX(-80%);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300821 transform: translateX(-80%);
822 border-radius: 2.0em;
823}
824
825.phone-front {
826 will-change: transform;
827 width: 11.2em;
828 height: 23.33em;
829 position: absolute;
830 top: 0;
831 bottom: 0;
832 left: 0;
833 right: 0;
834 margin: auto;
835 background-image: url("../images/phone_front.svg");
836 background-repeat: no-repeat;
837 background-position: -.53em 0;
838 background-size: 12.3em 23.36em;
839 border-radius: 2.0em;
840 box-shadow: -20px 27px 13px 10px rgba(0, 0, 0, 0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200841 -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
842 -moz-transition: transform 600ms, box-shadow 450ms;
843 -o-transition: transform 600ms, box-shadow 450ms;
844 transition: transform 600ms, box-shadow 450ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300845}
846
847.just-phone-front {
848 will-change: transform;
849 width: 11.2em;
850 height: 23.33em;
851 position: absolute;
852 right: 0;
853 margin: auto;
854 left:-25;
855 top:0;
856 bottom:auto;
857 margin-top:10%;
858 margin-bottom:15%;
859 margin-left: 35%;
860 margin-right: auto;
861 background-image: url("../images/phone_front.svg");
862 background-repeat: no-repeat;
863 background-position: -.53em 0;
864 background-size: 12.3em 23.36em;
865 border-radius: 2.0em;
866 box-shadow: -10px 13px 7px 5px rgba(0, 0, 0, 0.5);
867 -webkit-transform: scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200868 -moz-transform: scale(0.90);
869 -o-transform: scale(0.90);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300870 transform: scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200871 -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
872 -moz-transition: transform 600ms, box-shadow 450ms;
873 -o-transition: transform 600ms, box-shadow 450ms;
874 transition: transform 600ms, box-shadow 450ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300875}
876
877.phone-front-hover {
878 box-shadow: 0 12px 13px 10px rgba(0, 0, 0, 0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200879 -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
880 -moz-transition: transform 600ms, box-shadow 450ms;
881 -o-transition: transform 600ms, box-shadow 450ms;
882 transition: transform 600ms, box-shadow 450ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300883}
884
885.phone-screen {
886 width: 10.5em;
887 height: 19.3em;
888 position: relative;
889 left: 0;
890 right: 0;
891 top: 2.283em;
892 margin: auto;
893 background-color: #000;
894 overflow: hidden;
895}
896.phone-screen::before {
897 content: "";
898 position: absolute;
899 width: 100%;
900 height: 100%;
901 box-shadow: inset 13px 0 10px -5px rgba(250, 250, 250, 0.17), inset -13px 0 10px -5px rgba(250, 250, 250, 0.17);
902 background-image: url("../images/bliss_screens.gif");
903 background-repeat: no-repeat;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200904 background-position: 50% 0;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300905 background-size: cover;
906 -webkit-transform: scale(1);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200907 -moz-transform: scale(1);
908 -o-transform: scale(1);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300909 transform: scale(1);
910}
911.phone-screen::after {
912 content: "";
913 position: absolute;
914 width: 100%;
915 height: 100%;
916 background-color: rgba(250, 250, 250, 0.1);
917}
918
919.phone-side {
920 will-change: transform;
921 width: 13.33em;
922 height: 25em;
923 position: absolute;
924 top: 0;
925 bottom: 0;
926 left: 0;
927 right: 0;
928 margin: auto;
929 border-radius: 1.66em;
930 background-repeat: no-repeat;
931 background-position: 2.2em .5em;
932 background-size: 13.33em 24.73em;
933 -webkit-transform-style: preserve-3d;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200934 -moz-transform-style: preserve-3d;
935 -o-transform-style: preserve-3d;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300936 transform-style: preserve-3d;
937 -webkit-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200938 -moz-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
939 -o-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300940 transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
941 -webkit-transition: all 350ms;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200942 -moz-transition: all 350ms;
943 -o-transition: all 350ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300944 transition: all 350ms;
945}
946
947.phone-side-hover {
948 -webkit-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200949 -moz-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
950 -o-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300951 transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
952 -webkit-transition: all 350ms;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200953 -moz-transition: all 350ms;
954 -o-transition: all 350ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300955}
956
957@-webkit-keyframes figure-anim {
958 from {
959 border-radius: 50%;
960 -webkit-transform: rotate(0deg) scale(1);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200961 -moz-transform: rotate(0deg) scale(1);
962 -o-transform: rotate(0deg) scale(1);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300963 transform: rotate(0deg) scale(1);
964 }
965 to {
966 border-radius: 30%;
967 -webkit-transform: rotate(360deg) scale(0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200968 -moz-transform: rotate(360deg) scale(0.5);
969 -o-transform: rotate(360deg) scale(0.5);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300970 transform: rotate(360deg) scale(0.5);
971 }
972}
973
974@keyframes figure-anim {
975 from {
976 border-radius: 50%;
977 -webkit-transform: rotate(0deg) scale(1);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200978 -moz-transform: rotate(0deg) scale(1);
979 -o-transform: rotate(0deg) scale(1);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300980 transform: rotate(0deg) scale(1);
981 }
982 to {
983 border-radius: 30%;
984 -webkit-transform: rotate(360deg) scale(0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200985 -moz-transform: rotate(360deg) scale(0.5);
986 -o-transform: rotate(360deg) scale(0.5);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300987 transform: rotate(360deg) scale(0.5);
988 }
989}
990@-webkit-keyframes figure-container-anim {
991 from {
992 -webkit-transform: rotate(0deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200993 -moz-transform: rotate(0deg);
994 -o-transform: rotate(0deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300995 transform: rotate(0deg);
996 }
997 to {
998 -webkit-transform: rotate(360deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200999 -moz-transform: rotate(360deg);
1000 -o-transform: rotate(360deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +03001001 transform: rotate(360deg);
1002 }
1003}
1004@keyframes figure-container-anim {
1005 from {
1006 -webkit-transform: rotate(0deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +02001007 -moz-transform: rotate(0deg);
1008 -o-transform: rotate(0deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +03001009 transform: rotate(0deg);
1010 }
1011 to {
1012 -webkit-transform: rotate(360deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +02001013 -moz-transform: rotate(360deg);
1014 -o-transform: rotate(360deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +03001015 transform: rotate(360deg);
1016 }
1017}
1018
Henri Koivuneva87bdef32017-08-25 23:50:22 +03001019@media (min-width: 1200px) {
1020 .pull-right-lg {
1021 float: right !important; }
1022 .pull-left-lg {
1023 float: left !important; }
Henri Koivuneva9c1e2432017-11-22 22:01:33 +02001024 .pull-left-md {
1025 float: left !important; }
1026 .container {max-width: 1170px;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +03001027 .portfolio-projects .col-lg-6 {width: 100%}
1028 .navbar > .container {max-width: 1170px}
1029}
1030@media (min-width: 1366px) {
1031 #portfolio > .container, #about > .row {width: 90%;max-width: 1600px;margin-left:auto;margin-right: auto;}
1032 .navbar > .container {max-width: 1170px}
1033}
Unknowne3cf16e2017-11-04 16:32:52 -04001034
1035 /* The alert message box */
1036.alert {
1037 padding: 20px;
1038 background-color: #f44336; /* Red */
1039 color: white;
1040 margin-bottom: 15px;
1041}
Henri Koivunevac2503532017-11-23 04:00:26 +02001042.alert a {color: #fff;font-weight:bolder;padding-bottom:2px;margin-bottom:-2px;box-shadow: 0 2px}
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +02001043@media (max-width:768px) {.alert {width:90%;margin: 0 auto;}}
Henri Koivunevac2503532017-11-23 04:00:26 +02001044@media (max-width:1200px) {.alert {margin-top:3rem}}
Unknowne3cf16e2017-11-04 16:32:52 -04001045/* The close button */
1046.closebtn {
1047 margin-left: 15px;
1048 color: white;
1049 font-weight: bold;
1050 float: right;
1051 font-size: 22px;
1052 line-height: 20px;
1053 cursor: pointer;
1054 transition: 0.3s;
1055}
1056
Unknownb60d9422017-11-27 19:40:08 -05001057/* The alert message box */
1058.alert2 {
1059 padding: 20px;
1060 background-color: #17c13f; /* green */
1061 color: white;
1062 margin-bottom: 15px;
1063}
1064.alert2 a {color: #fff;font-weight:bolder;padding-bottom:2px;margin-bottom:-2px;box-shadow: 0 2px}
1065@media (max-width:768px) {.alert {width:90%;margin: 0 auto;}}
1066@media (max-width:1200px) {.alert {margin-top:3rem}}
1067/* The close button */
1068.closebtn {
1069 margin-left: 15px;
1070 color: white;
1071 font-weight: bold;
1072 float: right;
1073 font-size: 22px;
1074 line-height: 20px;
1075 cursor: pointer;
1076 transition: 0.3s;
1077}
1078
Unknowne3cf16e2017-11-04 16:32:52 -04001079/* When moving the mouse over the close button */
1080.closebtn:hover {
1081 color: black;
Unknownb60d9422017-11-27 19:40:08 -05001082}
Unknown55030612017-11-04 20:28:12 -04001083
1084.vcenter {
1085 display: inline-block;
1086 position: absolute;
1087 left: 50%;
1088 top: 50%;
1089 -webkit-transform: translate(-50%, -50%);
1090 transform: translate(-50%, -50%);
Unknownb60d9422017-11-27 19:40:08 -05001091}
Unknown55030612017-11-04 20:28:12 -04001092
Henri Koivuneva60a08562017-11-23 00:43:58 +02001093/* Anim
Unknownb60d9422017-11-27 19:40:08 -05001094width: 378px;
Henri Koivuneva60a08562017-11-23 00:43:58 +02001095 height: 290px;
1096 */
Unknown55030612017-11-04 20:28:12 -04001097.animation {
1098 display: inline-block;
1099 position: relative;
Unknownb60d9422017-11-27 19:40:08 -05001100 width: 64rem;
1101 height: 42rem;
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001102 margin: -2vh auto 0 auto;
Unknown55030612017-11-04 20:28:12 -04001103 vertical-align: middle;
1104}
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001105@media (max-width:720px) {
1106 .animation {margin-left:-30rem;margin-right:-30rem;}
1107}
1108@media (max-width:450px) {
1109 .animation {width:58rem;height:38rem;}
1110}
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001111@media (max-width:450px) {
1112 .animation {width:58rem;height:38rem;}
1113}
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001114@media (max-width:400px) {
1115 .animation {width:55rem;height:36rem;}
1116}
1117@media (max-width:380px) {
1118 .animation {width:50rem;height:33rem;}
1119}
1120@media (max-width:340px) {
1121 .animation {width:47rem;height:31rem;}
1122}
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001123@media (max-width:320px) {
1124 .animation {width:42rem;height:28rem;}
1125}
1126@media (max-height:650px) {
Henri Koivuneva39d1e2f2017-11-23 04:30:54 +02001127 .animation {margin-top: -7vh !important;margin-bottom: 10vh !important;}
Henri Koivuneva6f33f842017-11-23 03:27:31 +02001128}
1129@media (min-height:651px) {
1130 .animation {margin-top: -8vh !important;margin-bottom: 10vh !important;}
1131}
1132@media (min-height:670px) {
1133 .animation {margin-top: -6.5vh !important;margin-bottom: 10vh !important;}
1134}
1135@media (min-height:720px) {
Henri Koivunevaf259ace2017-11-23 04:28:03 +02001136 .animation {margin-top: -2vh !important;margin-bottom: 10vh !important;overflow-y:visible}
Henri Koivuneva6f33f842017-11-23 03:27:31 +02001137}
1138@media (min-height:800px) {
1139 .animation {margin-top: 0 !important;margin-bottom: 10vh !important;overflow-y:visible}
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001140}
Unknown55030612017-11-04 20:28:12 -04001141.animation .device {
1142 position: absolute;
1143 width: 100%;
1144 height: 100%;
1145 left: 50%;
1146 top: 50%;
1147 background: #111;
1148 -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1149 -moz-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1150 -ms-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1151 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1152 -moz-transform: translate(-50%, -50%);
1153 -ms-transform: translate(-50%, -50%);
1154 -webkit-transform: translate(-50%, -50%);
1155 transform: translate(-50%, -50%);
1156}
1157.animation .device .phone-home-button,
1158.animation .device .tablet-home-button {
1159 position: absolute;
1160 border-radius: 50%;
1161 background: #444;
1162 opacity: 0;
1163 z-index: 1;
1164 -webkit-transition: all 0.4s ease;
1165 -moz-transition: all 0.4s ease;
1166 -ms-transition: all 0.4s ease;
1167 transition: all 0.4s ease;
1168}
1169.animation .device .phone-home-button {
1170 width: 16px;
1171 height: 16px;
1172 margin-top: -8px;
1173 right: 11px;
1174 top: 50%;
1175}
1176.animation .device .tablet-home-button {
1177 width: 12px;
1178 height: 12px;
1179 margin-left: -6px;
1180 bottom: 7px;
1181 left: 50%;
1182}
1183.animation .device .screen-stand {
1184 position: absolute;
1185 width: 100%;
1186 margin-left: -10px;
1187 margin-top: -1px;
1188 top: 60%;
1189 opacity: 0;
1190 z-index: 1;
1191 -webkit-transition: all 0.4s ease-out;
1192 -moz-transition: all 0.4s ease-out;
1193 -ms-transition: all 0.4s ease-out;
1194 transition: all 0.4s ease-out;
1195}
1196.animation .device .screen-stand .leg {
1197 position: absolute;
1198 width: 12px;
1199 height: 16px;
1200 left: 50%;
1201 top: 0;
1202 margin-left: -6px;
1203 background: #111;
1204}
1205.animation .device .screen-stand .foot {
1206 position: absolute;
1207 width: 120px;
1208 height: 4px;
1209 left: 50%;
1210 top: 15px;
1211 margin-left: -60px;
1212 border-top-left-radius: 2px;
1213 border-top-right-radius: 2px;
1214 background: #111;
1215}
1216.animation .device .display {
1217 position: relative;
1218 width: 100%;
1219 height: 100%;
1220 overflow: hidden;
1221 background: #34495e;
1222 z-index: 3;
1223}
1224.animation .device .display div {
1225 position: absolute;
1226 width: 100%;
1227 height: 100%;
1228 left: 100%;
1229 white-space: nowrap;
1230 -webkit-transition: all 0.4s ease;
1231 -moz-transition: all 0.4s ease;
1232 -ms-transition: all 0.4s ease;
1233 transition: all 0.4s ease;
1234}
1235.animation .device .display div div {
1236 position: absolute;
1237 width: 100%;
1238 left: 0;
1239 top: 50%;
1240 margin-top: -14px;
Henri Koivuneva60a08562017-11-23 00:43:58 +02001241 font-size: 20px;
Unknown55030612017-11-04 20:28:12 -04001242 text-align: center;
Henri Koivuneva60a08562017-11-23 00:43:58 +02001243 /* color: #0080ff;*/
Unknown55030612017-11-04 20:28:12 -04001244}
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001245@media (max-width:450px) {
1246 .animation .device .display div div {width:100%;max-width:100%;font-size:12px !important;}
1247}
Henri Koivuneva60a08562017-11-23 00:43:58 +02001248 .animation .device .display .slide1 div {margin-top:0px;}
Unknown55030612017-11-04 20:28:12 -04001249.animation .device .display div div em {
1250 font-weight: bold;
1251}
1252.animation .device .display .slide1 {
Unknownd5655a22018-02-25 12:18:43 -05001253 /* background: #000; */
1254 background: url("https://i.imgur.com/wCp0xpe.jpg");
Henri Koivuneva60a08562017-11-23 00:43:58 +02001255 background-size: cover;
1256 background-repeat: no-repeat;
1257 background-position: center center;
1258 text-shadow: 1px 1px 2px #1f1f1f, -1px -1px 2px #1f1f1f, -1px 0 2px #1f1f1f, 0 -1px 2px #1f1f1f, 1px 0 2px #1f1f1f, 0 1px 2px #1f1f1f, 1px -1px 2px #1f1f1f, -1px 1px 2px #1f1f1f,
1259 2px 2px 2px #1f1f1f, -2px -2px 2px #1f1f1f, -2px 0 2px #1f1f1f, 0 -2px 2px #1f1f1f, 2px 0 2px #1f1f1f, 0 2px 2px #1f1f1f, 2px -2px 2px #1f1f1f, -2px 2px 2px #1f1f1f,
1260 3px 3px 2px #1f1f1f, -3px -3px 2px #1f1f1f, -3px 0 2px #1f1f1f, 0 -3px 2px #1f1f1f, 3px 0 2px #1f1f1f, 0 3px 2px #1f1f1f, 3px -3px 2px #1f1f1f, -3px 3px 2px #1f1f1f,
1261 4px 4px 4px #1f1f1f, -4px -4px 4px #1f1f1f, -4px 0 4px #1f1f1f, 0 -4px 4px #1f1f1f, 4px 0 4px #1f1f1f, 0 4px 4px #1f1f1f, 4px -4px 4px #1f1f1f, -4px 4px 4px #1f1f1f;
1262 color:white;
Unknown55030612017-11-04 20:28:12 -04001263}
1264.animation .device .display .slide2 {
Unknownd5655a22018-02-25 12:18:43 -05001265 /* background: #000; */
1266 background: url("https://i.imgur.com/KfArkPZ.jpg");
Henri Koivuneva60a08562017-11-23 00:43:58 +02001267 background-size: cover;
1268 background-repeat: no-repeat;
1269 background-position: center center;
1270 text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, -1px 0 2px #fff, 0 -1px 2px #fff, 1px 0 2px #fff, 0 1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff,
1271 2px 2px 2px #fff, -2px -2px 2px #fff, -2px 0 2px #fff, 0 -2px 2px #fff, 2px 0 2px #fff, 0 2px 2px #fff, 2px -2px 2px #fff, -2px 2px 2px #fff,
1272 3px 3px 2px #fff, -3px -3px 2px #fff, -3px 0 2px #fff, 0 -3px 2px #fff, 3px 0 2px #fff, 0 3px 2px #fff, 3px -3px 2px #fff, -3px 3px 2px #fff,
1273 4px 4px 4px #fff, -4px -4px 4px #fff, -4px 0 4px #fff, 0 -4px 4px #fff, 4px 0 4px #fff, 0 4px 4px #fff, 4px -4px 4px #fff, -4px 4px 4px #fff;
1274 color:#0080ff;
Unknown55030612017-11-04 20:28:12 -04001275}
1276.animation .device .display .slide3 {
Unknownd5655a22018-02-25 12:18:43 -05001277 /* background: #000; */
1278 background: url("https://i.imgur.com/c55mey7.jpg");
Henri Koivuneva60a08562017-11-23 00:43:58 +02001279 background-size: cover;
1280 background-repeat: no-repeat;
1281 background-position: center center;
1282 text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, -1px 0 2px #000, 0 -1px 2px #000, 1px 0 2px #000, 0 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000,
1283 2px 2px 2px #000, -2px -2px 2px #000, -2px 0 2px #000, 0 -2px 2px #000, 2px 0 2px #000, 0 2px 2px #000, 2px -2px 2px #000, -2px 2px 2px #000,
1284 3px 3px 2px #000, -3px -3px 2px #000, -3px 0 2px #000, 0 -3px 2px #000, 3px 0 2px #000, 0 3px 2px #000, 3px -3px 2px #000, -3px 3px 2px #000,
1285 4px 4px 4px #000, -4px -4px 4px #000, -4px 0 4px #000, 0 -4px 4px #000, 4px 0 4px #000, 0 4px 4px #000, 4px -4px 4px #000, -4px 4px 4px #000;
1286 color:white;
Unknown55030612017-11-04 20:28:12 -04001287}
1288.animation[data-animation-step="1"] .device {
Henri Koivuneva60a08562017-11-23 00:43:58 +02001289 width: 87%;
1290 height: 90%;
Unknown55030612017-11-04 20:28:12 -04001291 padding: 10px;
1292 border-radius: 4px;
1293}
1294.animation[data-animation-step="1"] .device .slide1 {
1295 left: 0%;
1296}
1297.animation[data-animation-step="1"] .device .screen-stand {
1298 opacity: 1;
1299 top: 100%;
1300}
1301.animation[data-animation-step="2"] .device {
Henri Koivuneva60a08562017-11-23 00:43:58 +02001302 width: 74%;
1303 height: 75%;
1304 padding: 16px;
Unknown55030612017-11-04 20:28:12 -04001305 border-radius: 10px;
1306}
1307.animation[data-animation-step="2"] .device .slide1 {
1308 left: -100%;
1309}
1310.animation[data-animation-step="2"] .device .slide2 {
1311 left: 0%;
1312}
1313.animation[data-animation-step="2"] .device .tablet-home-button {
1314 opacity: 1;
1315}
1316.animation[data-animation-step="3"] .device {
Henri Koivuneva60a08562017-11-23 00:43:58 +02001317 width: 27%;
1318 height: 75%;
Henri Koivuneva1cdd2cd2017-11-23 02:12:44 +02001319 padding: 16px 4px;
Unknown55030612017-11-04 20:28:12 -04001320 border-radius: 6px;
1321}
1322.animation[data-animation-step="3"] .device .slide1,
1323.animation[data-animation-step="3"] .device .slide2 {
1324 left: -100%;
1325}
1326.animation[data-animation-step="3"] .device .slide3 {
1327 left: 0%;
1328}
1329.animation[data-animation-step="3"] .device .phone-home-button {
1330 opacity: 1;
1331}
Henri Koivuneva6f33f842017-11-23 03:27:31 +02001332 @media (min-height:800px) {
1333 .animation[data-animation-step="1"] .device {width:87%; height:90%;}
1334 .animation[data-animation-step="2"] .device {width:80%; height:80%;}
1335 .animation[data-animation-step="3"] .device {width:28%; height:80%;}
1336 }
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001337 @media (max-height:720px) {
1338 .animation[data-animation-step="1"] .device {width:72%; height:75%;}
1339 .animation[data-animation-step="2"] .device {width:59%; height:60%;}
Henri Koivuneva9f8af432017-11-23 05:00:30 +02001340 .animation[data-animation-step="3"] .device {width:22%; height:63%;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001341 .animation .device .display div div {font-size:16px;}
1342 }
1343 @media (max-height:650px) {
1344 .animation[data-animation-step="1"] .device {width:62%; height:65%;}
1345 .animation[data-animation-step="2"] .device {width:54%; height:55%;}
Henri Koivunevad27df022017-11-23 05:12:58 +02001346 .animation[data-animation-step="3"] .device {width:22%; height:63%;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001347 .animation .device .display div div {font-size:15px;}
1348 }
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001349 @media (max-width:560px) {
Henri Koivunevabd03c012017-11-23 02:20:26 +02001350 .animation[data-animation-step="1"] .device {margin-top:1%;width:72%; height:75%;}
1351 .animation[data-animation-step="2"] .device {margin-top:1%;width:65%; height:66%;}
1352 .animation[data-animation-step="3"] .device {margin-top:1%;width:28%; height:80%;}
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001353 .animation .device .display div div {font-size:15px;}
1354 }
1355 @media (max-width:520px) {
1356 .animation[data-animation-step="1"] .device {margin-top:0%;width:66%; height:69%;}
1357 .animation[data-animation-step="2"] .device {margin-top:0%;width:62%; height:63%;}
Henri Koivunevabd03c012017-11-23 02:20:26 +02001358 .animation[data-animation-step="3"] .device {margin-top:0%;width:28%; height:80%;}
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001359 .animation .device .display div div {font-size:15px;}
1360 }
1361 @media (max-width:460px) {
1362 .animation[data-animation-step="1"] .device {margin-top:0%;width:58%; height:61%;}
1363 .animation[data-animation-step="2"] .device {margin-top:0%;width:54%; height:55%;}
Henri Koivuneva0e02df62017-11-23 04:33:04 +02001364 .animation[data-animation-step="3"] .device {margin-top:0%;width:25%; height:72%;}
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001365 .animation .device .display div div {font-size:15px;}
1366 }
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001367 @media (max-width:350px) {
1368 .animation[data-animation-step="1"] .device {margin-top:3%;width:62%; height:65%;}
1369 .animation[data-animation-step="2"] .device {margin-top:3%;width:58%; height:60%;}
1370 .animation[data-animation-step="3"] .device {margin-top:9%;width:30%; height:80%;}
1371 .animation .device .display div div {font-size:15px;}
1372 }
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001373 @media (max-width:320px) {
1374 .animation[data-animation-step="1"] .device {margin-top:6%;width:62%; height:65%;}
1375 .animation[data-animation-step="2"] .device {margin-top:6%;width:58%; height:60%;}
1376 .animation[data-animation-step="3"] .device {margin-top:12%;width:30%; height:80%;}
1377 .animation .device .display div div {font-size:15px;}
1378 }
Henri Koivuneva9c1e2432017-11-22 22:01:33 +02001379
1380/* More media queries */
1381@media (max-width: 430px) {
1382 h2, .h2 {font-size: 30px;}
Unknownb60d9422017-11-27 19:40:08 -05001383}