blob: 300b3a59b51cfe1191a9f6d52c1c006fb597f690 [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;
Unknown9fd47642018-10-02 10:36:28 -040013
Henri Koivuneva5c411dd2017-08-25 22:59:59 +030014 }
Unknown8e40a3b2017-07-30 14:47:14 -040015
Unknown62c1a402018-10-02 10:32:07 -040016#bg {
17 position: fixed;
18 top: -50%;
19 left: -50%;
20 width: 200%;
21 height: 200%;
22}
23#bg img {
24 position: absolute;
25 top: 0;
26 left: 0;
27 right: 0;
28 bottom: 0;
29 margin: auto;
30 min-width: 50%;
31 min-height: 50%;
32}
33
Henri Koivuneva468d1692017-08-12 16:24:41 +030034h1, .h1,
35h2, .h2,
36h3, .h3,
37h4, .h4,
38h5, .h5,
39h6, .h6 {
Unknown8e40a3b2017-07-30 14:47:14 -040040 font-family: "Comfortaa", Helvetica, Arial, sans-serif;
Henri Koivuneva468d1692017-08-12 16:24:41 +030041 line-height: 1.4;
Unknowna2d54432018-10-02 09:15:22 -040042 color: #222222; }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +030043h1, .h1 {font-size: 64px;}
44h2, .h2 {font-size: 42px;}
45h4, .h4 {font-weight: bolder;}
Unknown8e40a3b2017-07-30 14:47:14 -040046
47p {
48 font-family: "Comfortaa", sans-serif;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +030049 color: #ffffff;
50 margin: 0 0 30px; }
Unknown8e40a3b2017-07-30 14:47:14 -040051
Henri Koivuneva0f988192017-08-12 15:28:05 +030052a, .btn {
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +030053 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +020054 -moz-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
55 -o-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +030056 transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
Henri Koivuneva0f988192017-08-12 15:28:05 +030057}
58
Henri Koivuneva7f266022017-08-12 15:25:19 +030059a:hover, a:focus, a:active {text-decoration: none;}
60
Unknown8e40a3b2017-07-30 14:47:14 -040061body > .container-fluid {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +030062 padding: 0; }
Henri Koivuneva7edca392017-08-12 16:23:52 +030063
Henri Koivunevaf63e2a92017-08-12 16:37:49 +030064#portfolio > .container {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +030065 padding-left: 30px;
66 padding-right: 30px;
67}
68#portfolio > div > div > div {padding-right: 0;padding-left: 0}
Henri Koivunevaf63e2a92017-08-12 16:37:49 +030069
Unknowne3cf16e2017-11-04 16:32:52 -040070#family-lt > .container {
71 padding-left: 30px;
72 padding-right: 30px;
Unknownb60d9422017-11-27 19:40:08 -050073 font-size: 18px;
Unknowne3cf16e2017-11-04 16:32:52 -040074}
75#family-lt > div > div > div {padding-right: 0;padding-left: 0}
76
Henri Koivunevabcf672a2017-08-12 16:25:03 +030077.row,
78.container-fluid>.navbar-collapse,
79.container-fluid>.navbar-header,
80.container>.navbar-collapse,
81.container>.navbar-header {
Henri Koivuneva17653c52017-08-12 18:12:07 +030082 margin:auto;
83}
Unknown8e40a3b2017-07-30 14:47:14 -040084
85.container-fluid .text-muted {
86 margin: 20px 0; }
87
88.btn:focus, a:focus {
89 outline: none !important; }
90
91.navbar {
92 height: 70px;
93 background-color: transparent;
94 background: transparent;
95 border: none;
96 color: #ffffff;
97 z-index: 100;
98 margin-bottom: 0;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +030099 padding-left: 30px;
100 padding-right: 30px;
Unknown8e40a3b2017-07-30 14:47:14 -0400101 border-radius: 0;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300102 -webkit-transition: background-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200103 -moz-transition: background-color .2s ease 0s;
104 -o-transition: background-color .2s ease 0s;
Unknown2e345c42017-08-14 18:25:38 -0400105 transition: background-color .2s ease 0s; }
Henri Koivuneva3de908d2017-08-13 02:43:42 +0300106.navbar > .container {padding: 4px 0 0 0;width: 100%;margin-top:2px;}
Unknown8e40a3b2017-07-30 14:47:14 -0400107.navbar-brand {
Henri Koivunevae1841232017-08-12 21:55:21 +0300108 opacity: 0;
Henri Koivuneva3de908d2017-08-13 02:43:42 +0300109 margin-top: 5px;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300110 padding: 15px 0;
Unknown8e40a3b2017-07-30 14:47:14 -0400111 color: #ffffff;
112 font-weight: 400; }
113
114.navbar-default .navbar-nav > li > a {
115 color: #ffffff;
116 font-weight: 500;
117 font-size: 1em;
118 text-transform: lowercase;
Henri Koivuneva3de908d2017-08-13 02:43:42 +0300119 margin: 3px 5px;
Henri Koivunevac93da972017-08-12 15:18:06 +0300120 border: 1px solid transparent;
Henri Koivuneva4d964cb2017-08-12 15:22:55 +0300121 border-radius: 5px;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300122 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200123 -moz-transition: color .2s ease 0s, border-color .2s ease 0s;
124 -o-transition: color .2s ease 0s, border-color .2s ease 0s;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300125 transition: color .2s ease 0s, border-color .2s ease 0s; }
Henri Koivunevabcf672a2017-08-12 16:25:03 +0300126 .navbar-default .navbar-nav > li:last-child > a {margin-right: 0}
Henri Koivunevac93da972017-08-12 15:18:06 +0300127.navbar-default .navbar-nav > li > a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400128 color: #ffffff;
129 border: 1px solid #ffffff; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300130.navbar-default .navbar-nav > li > a:active,
131.navbar-default .navbar-nav > li > a:focus,
132.navbar.solid .navbar-nav > li > a:active, .navbar.solid .navbar-nav > li > a:focus {
133 color: rgba(255,255,255,0.8);
134 border: 1px solid rgba(255,255,255,0.8); }
Unknown8e40a3b2017-07-30 14:47:14 -0400135.navbar-default .navbar-nav > li > a:visited {
136 color: #ffffff;
137 text-decoration: none; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300138.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400139 background-color: transparent;
140 color: #ffffff; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300141.navbar-default .navbar-nav > .active > a:focus,
142.navbar.solid .navbar-nav > li > a:active,
143.navbar.solid .navbar-nav > li > a:focus {
144 background-color: transparent;
145 color: rgba(255,255,255,0.8); }
Henri Koivuneva60a08562017-11-23 00:43:58 +0200146.navbar-toggle {margin-right:0;padding:15px;}
Unknown8e40a3b2017-07-30 14:47:14 -0400147.navbar-default .navbar-toggle {
148 border-color: #ffffff; }
149 .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
Unknowna2d54432018-10-02 09:15:22 -0400150 background-color: #222222;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300151 }
Unknown8e40a3b2017-07-30 14:47:14 -0400152 .navbar-default .navbar-toggle .icon-bar {
153 color: #ffffff;
154 background-color: #ffffff; }
Henri Koivuneva6b7c7962017-08-12 21:54:58 +0300155.navbar-default .navbar-collapse.collapse.in ul {
Unknowna2d54432018-10-02 09:15:22 -0400156 background-color: #222222;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300157}
Henri Koivuneva6b7c7962017-08-12 21:54:58 +0300158.navbar-collapse.collapsing {
Unknowna2d54432018-10-02 09:15:22 -0400159 background-color: #222222;
Henri Koivuneva5e6ed7a2017-08-12 18:14:02 +0300160}
161.navbar-default .navbar-toggle .icon-bar {
162 color: #ffffff;
163 background-color: #ffffff; }
Unknown8e40a3b2017-07-30 14:47:14 -0400164.navbar-default .navbar-collapse.collapse.in ul {
Unknowna2d54432018-10-02 09:15:22 -0400165 background-color: #222222;
Henri Koivuneva5e6ed7a2017-08-12 18:14:02 +0300166}
Unknown94e4caa2017-08-12 10:48:07 -0400167.navbar-collapse.collapse.collapsing {
Unknowna2d54432018-10-02 09:15:22 -0400168 background-color: #222222;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300169}
nilac8991c1655032017-08-19 12:37:44 +0200170
Henri Koivuneva5e6ed7a2017-08-12 18:14:02 +0300171.navbar-collapse.collapse.show {
Unknowna2d54432018-10-02 09:15:22 -0400172 background-color: #222222;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300173 -webkit-transition: background-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200174 -moz-transition: background-color .2s ease 0s;
175 -o-transition: background-color .2s ease 0s;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300176 transition: background-color .2s ease 0s;
Henri Koivunevae15afea2017-08-12 18:23:45 +0300177 -webkit-border-bottom-left-radius: 4px;
178 -webkit-border-bottom-right-radius: 4px;
179 border-bottom-left-radius: 4px;
180 border-bottom-right-radius: 4px;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300181}
Henri Koivuneva936cb392017-08-12 18:49:20 +0300182
183.navbar-collapse .navbar-nav > li > a,
184.navbar-collapse .navbar-nav > li > a:hover,
185.navbar-collapse .navbar-nav > li > a:focus,
186.navbar-collapse .navbar-nav > li > a:active {
187 border-color: transparent !important;
188}
189
Unknown8e40a3b2017-07-30 14:47:14 -0400190/* Solid class attached on scroll past first section */
191.navbar.solid {
Unknowna2d54432018-10-02 09:15:22 -0400192 background-color: #222222;
Unknown2e345c42017-08-14 18:25:38 -0400193 top: 0;
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300194 width: 100%;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200195 margin: 0;
196 box-shadow: 0 7px 8px 0 rgba(0,0,0,0.3);
197 -webkit-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
198 -moz-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
199 -o-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
200 transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300201 }
Unknown8e40a3b2017-07-30 14:47:14 -0400202 .navbar.solid .navbar-brand {
Henri Koivunevae1841232017-08-12 21:55:21 +0300203 opacity: 1;
Unknown8e40a3b2017-07-30 14:47:14 -0400204 display: inline-block;
205 color: #ffffff;
Henri Koivunevae1841232017-08-12 21:55:21 +0300206 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200207 -moz-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
208 -o-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
Henri Koivunevae1841232017-08-12 21:55:21 +0300209 transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s; }
Unknown8e40a3b2017-07-30 14:47:14 -0400210 .navbar.solid .navbar-nav > li > a {
211 color: #ffffff;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300212 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200213 -moz-transition: color .2s ease 0s, border-color .2s ease 0s;
214 -o-transition: color .2s ease 0s, border-color .2s ease 0s;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300215 transition: color .2s ease 0s, border-color .2s ease 0s; }
Unknown8e40a3b2017-07-30 14:47:14 -0400216
217.cover {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300218 padding: 6% 0 8% 0; }
Unknown8e40a3b2017-07-30 14:47:14 -0400219 .cover.top {
Henri Koivuneva0752d232017-08-12 18:08:32 +0300220 padding: 10vh 0 15vh 0;
Unknown8e40a3b2017-07-30 14:47:14 -0400221 height: 100vh;
222 display: -webkit-box;
223 display: -ms-flexbox;
224 display: flex;
Unknown62c1a402018-10-02 10:32:07 -0400225 /* background-color: #0080ff;*/
226 background: url(images/web_bg_1280.png) no-repeat center center fixed;
227 -webkit-background-size: cover;
228 -moz-background-size: cover;
229 -o-background-size: cover;
230 background-size: cover;
231 }
Unknown8e40a3b2017-07-30 14:47:14 -0400232 .cover.bottom {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300233 padding: 6% 0 5.5% 0; }
234 body > .cover.bottom:nth-child(4) {padding: 6% 0 5.5% 0 !important}
Henri Koivuneva04797472017-08-12 18:35:39 +0300235 @media (max-width: 550px) {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300236 .cover, .cover.bottom {padding: 17.5% 30px 17.5% 30px; } }
Unknown8e40a3b2017-07-30 14:47:14 -0400237
238.headline {
239 padding-top: 6.25em; }
Henri Koivuneva0752d232017-08-12 18:08:32 +0300240 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300241 max-width: 1600px;
242 width: 100%;
Henri Koivuneva0752d232017-08-12 18:08:32 +0300243 margin: 0 auto;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300244 padding-right: 30px;
245 padding-left: 30px;
Henri Koivuneva0752d232017-08-12 18:08:32 +0300246 display: block; }
Unknown8e40a3b2017-07-30 14:47:14 -0400247 @media screen and (min-width: 768px) {
248 .headline {
249 padding-top: 3.75em; } }
250 @media screen and (min-width: 992px) {
251 .headline {
252 padding-top: 1.5625em; } }
253 @media screen and (min-width: 1200px) {
254 .headline {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200255 padding-top: 0; } }
Unknown8e40a3b2017-07-30 14:47:14 -0400256
257#about {
Unknowna2d54432018-10-02 09:15:22 -0400258 background-color: #222222; }
Unknown8e40a3b2017-07-30 14:47:14 -0400259 #about h2 {
260 color: #0080ff; }
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300261 #about > div > div.row.break > div > p {margin-bottom: 15px}
Unknown8e40a3b2017-07-30 14:47:14 -0400262
263.profile-img {
264 margin-bottom: 15px;
265 width: 120px; }
266
267.about, .about-info, .about-tools, .about-last {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300268 padding: 4% 30px 1% 30px;
269 font-size: 18px; }
Unknown8e40a3b2017-07-30 14:47:14 -0400270 .about-tools {
271 padding-top: 4.375em;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300272 font-size: 18px; }
Unknown8e40a3b2017-07-30 14:47:14 -0400273 @media screen and (min-width: 992px) {
274 .about-tools {
275 padding-top: 5.625em; } }
276 .about-tools ul:first-child {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200277 padding-left: 0; }
Unknown8e40a3b2017-07-30 14:47:14 -0400278 .about-tools ul {
279 color: #0080ff;
280 list-style: none; }
281 .about-tools ul li {
282 padding-top: 0.75em; }
283 .about-last {
284 padding-top: 3.125em;
285 padding-bottom: 0;
286 font-size: 1.125em; }
287 @media screen and (min-width: 992px) {
288 .about-last {
289 padding-top: 0; } }
290 .about-last p {
291 color: #0080ff; }
292
293#portfolio {
294 background-color: #0080ff; }
Unknown8e40a3b2017-07-30 14:47:14 -0400295
Unknown8e40a3b2017-07-30 14:47:14 -0400296.portfolio-projects--btn {
297 background: transparent;
Unknowna2d54432018-10-02 09:15:22 -0400298 color: #222222;
299 border: 1px solid #222222;
Unknown8e40a3b2017-07-30 14:47:14 -0400300 border-radius: 5px;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300301 margin-bottom: 1.25em;
302 font-size: 18px;
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200303 margin: 8px; }
Unknown8e40a3b2017-07-30 14:47:14 -0400304 .portfolio-projects--btn:hover {
Unknowna2d54432018-10-02 09:15:22 -0400305 background: #222222;
Unknown8e40a3b2017-07-30 14:47:14 -0400306 color: #ffffff; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300307 .portfolio-projects--btn:focus,
308 .portfolio-projects--btn:active {
Unknowna2d54432018-10-02 09:15:22 -0400309 background: #111111;
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300310 color: #ffffff; }
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200311@media (max-width:650px) {
312 .portfolio-projects--btn {font-size:16px;}
313}
Unknown8e40a3b2017-07-30 14:47:14 -0400314.portfolio-projects--image {
315 margin-bottom: 1.875em;
316 padding-top: 5%; }
317
Henri Koivunevabe19c192017-11-22 22:14:33 +0200318.about-tools ul li, .contact-social-icons ul a li {
319 text-align: center; }
320
321.centered {
322 float: none;
323 margin-left: auto;
324 margin-right: auto; }
325
326
327.vcenter {
328 display: inline-block;
329 vertical-align: middle;
330 float: none; }
331
332.break {
333 clear: both;
334 margin-top: 10px; }
335
336@media (min-width: 360px) {
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300337 #team > .container .row > div {width: 100%;margin: 0;}
338}
339
Henri Koivunevabe19c192017-11-22 22:14:33 +0200340@media (min-width: 768px) {
341 .pull-right-sm {
342 float: right !important; }
343 .pull-left-sm {
344 float: left !important; }
345 .container {width: 768px}
346 .navbar-right {margin-right: 0;}
347 .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {margin-left: 0;padding-left: 15px}
348}
349@media (min-width: 992px) {
350 .pull-right-md {
351 float: right !important; }
352 .pull-left-md {
353 float: left !important; }
354 .container {width: 94%;}
355}
356@media (min-width: 1200px) {
357 .pull-right-lg {
358 float: right !important; }
359 .pull-left-lg {
360 float: left !important; }
361 .container {width: 1170px;}
362 .portfolio-projects .col-lg-6 {width: 100%}
363 .navbar > .container {max-width: 1170px}
364}
365@media (min-width: 1366px) {
366 #portfolio > .container, #about > .row {width: 90%;max-width: 1600px;margin-left:auto;margin-right: auto;}
367 .navbar > .container {max-width: 1170px}
368}
369
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200370@media (max-width:768px) {
371 .portfolio-projects--desc {
372 margin-top: 30px;
373 margin-bottom: 30px;
374 font-size: 16px; }
375}
Henri Koivunevabe19c192017-11-22 22:14:33 +0200376@media (min-width: 768px) {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300377 .portfolio-projects {
378 margin-top: 0.625em; } }
379.portfolio-projects--title {
380 margin-top: 0.9375em;
381 font-size: 20px; }
Henri Koivunevabe19c192017-11-22 22:14:33 +0200382@media (min-width: 768px) {
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200383 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 21px;margin-top:0rem;}
384 .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 +0300385 .portfolio-projects--desc {
386 margin-top: 30px;
387 margin-bottom: 30px;
388 font-size: 16px; }
389 .portfolio-projects--btn {font-size: 14px;margin:0 4px 16px 4px;}
390 #portfolio > div > div > div:nth-child(1) > div > div.col-sm-5.text-center,
391 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-7.text-center.pull-right-sm {padding-left:0;}
392 #portfolio > div > div > div:nth-child(1) > div > div.col-sm-7.text-center,
393 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm {padding-right: 0;} }
394 @media screen and (min-width: 992px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200395 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 21px;margin-top:0rem;}
396 .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 +0300397 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-left:-8px;}
398 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(5) {margin-right:-8px;} }
399 @media screen and (min-width: 1080px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200400 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 21px;margin-top:3.75rem;}
401 .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 +0300402 }
403 @media screen and (min-width: 1200px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200404 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 24px;margin-top:2.5rem;}
405 .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 +0300406 .portfolio-projects--desc {
Henri Koivunevac2503532017-11-23 04:00:26 +0200407 margin-top: 24px;
408 margin-bottom: 24px;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300409 font-size: 18px; }
410 .portfolio-projects .col-lg-6 + .col-lg-6 + .col-lg-6 {margin-top:40px}
Henri Koivunevac2503532017-11-23 04:00:26 +0200411 .portfolio-projects--btn {font-size: 18px;margin:8px;} }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300412 @media screen and (min-width: 1366px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200413 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {margin-top:7.5rem;}
414 .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {margin-top:6rem;}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300415 }
416 @media (min-width: 1500px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200417 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 28px;margin-top:11rem;}
418 .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {font-size: 28px;margin-top:9.5rem;}
419 .portfolio-projects--btn {font-size: 18px;}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300420 }
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200421 .portfolio-projects--image-title {margin-top:-3rem;margin-bottom:6rem;}
422 @media (max-width: 768px) {
423 .portfolio-projects--image-title {margin-top:-3rem;margin-bottom:3rem;}
424 }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300425
Unknown8e40a3b2017-07-30 14:47:14 -0400426#contact {
Unknowna2d54432018-10-02 09:15:22 -0400427 background-color: #222222;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300428 padding-left: 15px;
429 padding-right: 15px }
Unknown8e40a3b2017-07-30 14:47:14 -0400430 #contact h2 {
431 color: #0080ff; }
432
433.contact-social-icons p {
434 color: #0080ff; }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300435.contact-social-icons > ul {padding:0;margin:0 auto;}
Unknown8e40a3b2017-07-30 14:47:14 -0400436.contact-social-icons ul a {
437 color: #0080ff;
438 list-style: none; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300439 .contact-social-icons ul a:hover,
Henri Koivunevabef78a62017-08-12 22:32:07 +0300440 .team-links-list a:hover,
441 .family-links-list a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400442 color: #ffffff; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300443 .contact-social-icons ul a:focus,
444 .contact-social-icons ul a:active,
445 .team-links-list a:focus,
Henri Koivunevabef78a62017-08-12 22:32:07 +0300446 .team-links-list a:active,
447 .family-links-list a:focus,
448 .family-links-list a:active {
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300449 color: rgba(255,255,255,0.8); }
Unknown8e40a3b2017-07-30 14:47:14 -0400450 .contact-social-icons ul a li {
451 display: inline-block;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300452 padding: 1.25%;
453 font-size: 16px }
Henri Koivuneva16234182017-08-13 03:09:43 +0300454 @media (max-width: 1200px) {
Henri Koivunevac9c6ac62017-08-13 03:12:28 +0300455 #family > div > div.row > div.center > div {margin:1.5em 4% 3em 4%;width:42%;float:left;}
Henri Koivuneva16234182017-08-13 03:09:43 +0300456 #family > div > div.row > div.center > div:last-child {margin-bottom: 0}
457 }
458 @media (max-width: 720px) {
459 #family > div > div.row > div.center > div {margin:1.5em 4% 3em 4%;width:92%;}
460 }
Unknown8e40a3b2017-07-30 14:47:14 -0400461
462.footer {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300463 padding-top: 1em;
Unknown8e40a3b2017-07-30 14:47:14 -0400464 bottom: 0;
465 width: 100%;
466 /* Set the fixed height of the footer here */
Unknowna2d54432018-10-02 09:15:22 -0400467 background-color: #111111;
Unknownf0310a82017-08-12 19:32:49 -0400468
Unknown8e40a3b2017-07-30 14:47:14 -0400469 color: #ffffff; }
electrikjesus34f27d12017-08-12 17:13:35 -0400470.footer-role, .footer-name, .footer-description {
471 color: #FFFFFF;
472}
473.footer-description {
474 color: #fff;
475 font-size: 18px;
476}
477.footer-role h4, .footer-links-list a {
478 color: #0080ff;
479}
480.footer-header h4 {
481 color: #0080ff;
482}
Unknown8e40a3b2017-07-30 14:47:14 -0400483#scrollIcon, #scrollTopIcon {
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200484 margin-top: 4vh;
Unknown8e40a3b2017-07-30 14:47:14 -0400485 padding: 10px;
486 font-size: 1.5em;
Unknowna2d54432018-10-02 09:15:22 -0400487 color: #222222;
488 border: solid 2px #222222;
Unknown8e40a3b2017-07-30 14:47:14 -0400489 border-radius: 50%; }
490
491#scrollTopIcon {
492 margin-top: 10px;
493 font-size: 1em;
494 color: #ffffff;
495 border-color: #ffffff; }
496
497.back-to-top {
498 display: none; }
499 .back-to-top.visible {
500 display: block; }
Unknown423f0342017-07-30 16:44:34 -0400501
502/* our team section */
Henri Koivunevabef78a62017-08-12 22:32:07 +0300503#team, #family {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300504 background-color: #0080ff;
Unknown2175d332017-08-13 19:28:40 -0400505 /*font-weight: 700;
506 font-size: 21px; */
Unknown423f0342017-07-30 16:44:34 -0400507}
508.hr.invisible_hr {
509 height: 0;
510 padding: 0;
511}
512.hr.big_size_hr {
513 margin: 30px 0;
514}
515.hr {
516 clear: both;
517 display: block;
518 font-size: 0;
519 height: 24px;
520 margin: 20px 0;
521 overflow: hidden;
522 padding: 2px 0;
523 position: relative;
524 text-align: center;
525 width: 100%;
526}
527.highlight_secondary {
528 color: #FFFFFF;
529}
Henri Koivuneva984bf522017-08-12 14:51:57 +0300530.team-role, .team-name, .team-links-list a {
Unknowna2d54432018-10-02 09:15:22 -0400531 color: #222222;
nilac8991c1655032017-08-19 12:37:44 +0200532 text-align: center;
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300533 white-space: normal;
534 width: 100%;
Unknown4f1903e2017-07-30 19:40:03 -0400535}
nilac8991c1655032017-08-19 12:37:44 +0200536.team-name, .family-name {
537 font-size: 21px;
538 text-align: center;
539 white-space: nowrap;
540}
Henri Koivunevabef78a62017-08-12 22:32:07 +0300541.team-links, .family-links {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300542 padding-top: .75em;
Unknowna2d54432018-10-02 09:15:22 -0400543 color: #222222;
nilac8991c1655032017-08-19 12:37:44 +0200544 text-align: center;
Henri Koivuneva984bf522017-08-12 14:51:57 +0300545}
Henri Koivunevabef78a62017-08-12 22:32:07 +0300546.team-image img, .family-image img {
Henri Koivunevac5e99ce2017-08-12 15:59:30 +0300547 max-width:150px;
548 max-height: 150px;
549 margin:0 auto;
Henri Koivuneva4c866502017-08-12 17:14:37 +0300550}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300551#team > .container .row > div {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200552 min-height: 0;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300553 padding-left: 0;
554 padding-right: 0;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300555 /* display: flex; */
556 /* flex-wrap: wrap; */
557 /* justify-content: flex-start; */
558}
559 @media (min-width: 768px) {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200560 #team > .container .row > div {min-height: 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300561 #team .col-sm-4 {
562 width: 100%;
563 margin: 0;
564 }
565 }
566 @media (min-width: 992px) {
567 #team .col-md-2 {
568 width: 100%;
569 margin: 0;
570 }
571 }
572 @media (min-width: 1200px) {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200573 #team > .container .row > div {min-height: 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300574 }
575 @media (max-width: 700px) {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200576 #team > .container .row > div {min-height: 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300577 #team .col-xs-6 {width: 42%;margin:4%;}
578 }
579 @media (max-width: 500px) {
580 #team > .container .row > div {min-height: 250px;}
581 #team .col-xs-6 {width: 92%;margin:4%;}
582 }
583#team > .container .row > .row, #team > .container {padding-left:0;padding-right: 0}
584
585/* Bliss family section */
586#family {
Unknowna2d54432018-10-02 09:15:22 -0400587 background-color: #222222;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300588}
589#family > div > div.row > div {font-size: 18px}
590.family-role, .family-name, .family-description {
591 color: #FFFFFF;
592}
593.family-description {
594 color: #fff;
595 font-size: 18px;
596}
597.family-role h4, .family-links-list a {
598 color: #0080ff;
599}
600.family-header h2 {
601 color: #0080ff;
602}
603#family .about-tools {
604 font-size: 20px;
605}
606.family-image img {
607 max-width:150px;
608 max-height: 150px;
609 margin:0 auto;
610}
611.family-projects--btn {
612 background: transparent;
Unknown7e529f82017-11-04 16:44:32 -0400613 color: #0080ff;
614 border: 1px solid #0080ff;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300615 border-radius: 5px;
616 margin-bottom: 1.25em;
617 font-weight: 700;
618 font-size: 21px; }
619 .family-projects--btn:hover {
Unknown7e529f82017-11-04 16:44:32 -0400620 background: #0080ff;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300621 color: #ffffff; }
622 .family-projects--btn:focus,
623 .family-projects--btn:active {
Unknown7e529f82017-11-04 16:44:32 -0400624 background: #0080ff;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300625 color: #ffffff; }
626
Henri Koivuneva3492c6c2017-11-23 04:45:03 +0200627
628@media (min-height: 880px) {
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200629 #scrollIcon, #scrollTopIcon {margin-top: 4vh;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300630}
Henri Koivuneva3492c6c2017-11-23 04:45:03 +0200631@media (min-height: 900px) {
632 #scrollIcon, #scrollTopIcon {margin-top: 6vh;}
633}
634@media (min-height: 960px) {
635 #scrollIcon, #scrollTopIcon {margin-top: 10vh;}
636}
637@media (min-height: 980px) {
638 #scrollIcon, #scrollTopIcon {margin-top: 12vh;}
639}
640@media (min-height: 1020px) {
641 #scrollIcon, #scrollTopIcon {margin-top: 14vh;}
642}
643@media (min-height: 1090px) {
644 #scrollIcon, #scrollTopIcon {margin-top: 16vh;}
645}
646@media (max-height: 880px) {
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200647 #scrollIcon, #scrollTopIcon {margin-top: 2vh;}
Henri Koivuneva3492c6c2017-11-23 04:45:03 +0200648}
649@media (max-height: 850px) {
650 #scrollIcon, #scrollTopIcon {margin-top: 0vh;}
651}
652@media (max-height: 820px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200653 #scrollIcon, #scrollTopIcon {margin-top: -2vh;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300654 .cover.top {padding: 7.5vh 0 12.5vh 0;}
655}
656@media (max-height: 750px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200657 #scrollIcon, #scrollTopIcon {margin-top: -8vh;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300658}
659@media (max-height: 720px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200660 #scrollIcon, #scrollTopIcon {margin-top: -8vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200661}
662@media (max-height: 690px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200663 #scrollIcon, #scrollTopIcon {margin-top: -10vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200664 .animation {margin-top:-6vh !important;}
665}
666@media (max-height: 670px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200667 #scrollIcon, #scrollTopIcon {margin-top: -14vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200668 .animation {margin-top:-7vh !important;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300669}
670@media (max-height: 650px) {
Henri Koivunevaf259ace2017-11-23 04:28:03 +0200671 #scrollIcon, #scrollTopIcon {margin-top: -14vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200672 .animation {margin-top:-8vh !important;}
673 .cover.top {padding: 6vh 0 5vh 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300674 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 42vh;}
675}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200676@media (max-height: 630px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200677 #scrollIcon, #scrollTopIcon {margin-top: -19vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200678 .animation {margin-top:-10vh !important;}
679 .cover.top {padding: 6vh 0 5vh 0;}
680}
681@media (max-height: 600px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200682 #scrollIcon, #scrollTopIcon {margin-top: -20vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200683 .animation {margin-top:-13vh !important;}
684 .cover.top {padding: 6vh 0 5vh 0;}
685}
Henri Koivunevad27df022017-11-23 05:12:58 +0200686@media (max-height: 600px) and (orientation:landscape) {
687 #scrollIcon, #scrollTopIcon {margin-top: -20vh;display: none;}
688}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300689@media (max-height: 550px) {
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200690 #scrollIcon, #scrollTopIcon {display:none}
691 .cover.top {padding: 6vh 0 3vh 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300692 .headline {padding-top:3vh;}
693 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
694}
695@media (max-height: 480px) {
696 #scrollIcon, #scrollTopIcon {margin-top: 0}
697 .cover.top {padding: 3vh 0 3vh 0;}
698 .headline {padding-top:1.5vh;}
699 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
700}
701@media (max-height: 320px) {
702 .cover.top {padding: 1vh 0 3vh 0;}
703 .headline {padding-top:1vh;}
704 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 25vh;}
705}
706@media (max-width: 768px) {
707 .container-fluid {padding:30px 0 !important;}
708 .h1, .h2, .h3, h1, h2, h3 {
709 margin-top: 10px;
710 margin-bottom: 10px;
711 }
712 .lead, .about, .about-info, .about-tools, .about-last {font-size: 16px}
713 .row.cover.top .lead {
714 max-width: 350px;
715 margin-left:auto;
716 margin-right: auto
717 }
718 .h4, h4 {font-size: 20px}
719 #portfolio h2 {padding-bottom: 0}
720 #portfolio > .container {padding-right: 0;padding-left: 0}
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200721 .portfolio-projects--btn {margin-top:0;margin-left: 4px;margin-right: 4px}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300722 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-right: 4px}
723 #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 +0200724 #scrollIcon, #scrollTopIcon {font-size: 1em;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300725}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200726@media (max-width:480px) {.row.cover.top .lead {max-width:180px}}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300727@media (max-device-height: 480px) and (orientation: landscape) {
728 .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
729 max-height: 240px;
730 }
731 .navbar-nav>li>a {
732 padding-top: 6px;
733 padding-bottom: 6px;
734 }
735}
736@media (max-width: 360px) {
737 .h1, h1 {font-size: 32px;}
738 .cover, .cover.bottom {
739 padding-left: 15px;
740 padding-right: 15px;
741 }
742}
743
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300744h1 {
745 color: #fff;
746 cursor: default;
747}
748
749h1 span:nth-of-type(1) {
750 font-size: 1em;
751 line-height: 0.5em;
752}
753h1 span:nth-of-type(2) {
754 font-size: .4em;
755 font-weight: 400;
756 line-height: 3.65em;
757 color: #0080ff;
758 background-color: #282828;
759 padding: 3px 10px;
760 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.6);
761}
762h1 span:nth-of-type(3) {
763 font-size: 1.5em;
764 line-height: .85em;
765}
766
767.space {
768 will-change: transform;
769 position: relative;
770 left:-25;
771 top:auto;
772 bottom:auto;
773 margin-top:15%;
774 margin-bottom:25%;
775 margin-left: 35%;
Henri Koivunevabe19c192017-11-22 22:14:33 +0200776 margin-right: auto;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300777 -webkit-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200778 -moz-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
779 -o-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300780 transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
781 -webkit-transition: all 600ms;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200782 -moz-transition: all 600ms;
783 -o-transition: all 600ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300784 transition: all 600ms;
785}
786
787.space-hover {
788 position: relative;
789 left:-25;
790 top:auto;
791 bottom:auto;
792 margin-top:30%;
793 margin-bottom:25%;
794 margin-left: 45%;
Henri Koivunevabe19c192017-11-22 22:14:33 +0200795 margin-right: auto;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300796 -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200797 -moz-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
798 -o-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300799 transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
800}
801
802.phone-container {
803 width: 11.2em;
804 height: 23.33em;
805 position: absolute;
806 top: 0;
807 bottom: 0;
808 left: 0;
809 right: 0;
810 margin: auto;
811 -webkit-transform-style: preserve-3d;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200812 -moz-transform-style: preserve-3d;
813 -o-transform-style: preserve-3d;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300814 transform-style: preserve-3d;
815 -webkit-transform: translateX(-80%);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200816 -moz-transform: translateX(-80%);
817 -o-transform: translateX(-80%);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300818 transform: translateX(-80%);
819 border-radius: 2.0em;
820}
821
822.phone-front {
823 will-change: transform;
824 width: 11.2em;
825 height: 23.33em;
826 position: absolute;
827 top: 0;
828 bottom: 0;
829 left: 0;
830 right: 0;
831 margin: auto;
832 background-image: url("../images/phone_front.svg");
833 background-repeat: no-repeat;
834 background-position: -.53em 0;
835 background-size: 12.3em 23.36em;
836 border-radius: 2.0em;
837 box-shadow: -20px 27px 13px 10px rgba(0, 0, 0, 0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200838 -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
839 -moz-transition: transform 600ms, box-shadow 450ms;
840 -o-transition: transform 600ms, box-shadow 450ms;
841 transition: transform 600ms, box-shadow 450ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300842}
843
844.just-phone-front {
845 will-change: transform;
846 width: 11.2em;
847 height: 23.33em;
848 position: absolute;
849 right: 0;
850 margin: auto;
851 left:-25;
852 top:0;
853 bottom:auto;
854 margin-top:10%;
855 margin-bottom:15%;
856 margin-left: 35%;
857 margin-right: auto;
858 background-image: url("../images/phone_front.svg");
859 background-repeat: no-repeat;
860 background-position: -.53em 0;
861 background-size: 12.3em 23.36em;
862 border-radius: 2.0em;
863 box-shadow: -10px 13px 7px 5px rgba(0, 0, 0, 0.5);
864 -webkit-transform: scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200865 -moz-transform: scale(0.90);
866 -o-transform: scale(0.90);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300867 transform: scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200868 -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
869 -moz-transition: transform 600ms, box-shadow 450ms;
870 -o-transition: transform 600ms, box-shadow 450ms;
871 transition: transform 600ms, box-shadow 450ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300872}
873
874.phone-front-hover {
875 box-shadow: 0 12px 13px 10px rgba(0, 0, 0, 0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200876 -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
877 -moz-transition: transform 600ms, box-shadow 450ms;
878 -o-transition: transform 600ms, box-shadow 450ms;
879 transition: transform 600ms, box-shadow 450ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300880}
881
882.phone-screen {
883 width: 10.5em;
884 height: 19.3em;
885 position: relative;
886 left: 0;
887 right: 0;
888 top: 2.283em;
889 margin: auto;
890 background-color: #000;
891 overflow: hidden;
892}
893.phone-screen::before {
894 content: "";
895 position: absolute;
896 width: 100%;
897 height: 100%;
898 box-shadow: inset 13px 0 10px -5px rgba(250, 250, 250, 0.17), inset -13px 0 10px -5px rgba(250, 250, 250, 0.17);
899 background-image: url("../images/bliss_screens.gif");
900 background-repeat: no-repeat;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200901 background-position: 50% 0;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300902 background-size: cover;
903 -webkit-transform: scale(1);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200904 -moz-transform: scale(1);
905 -o-transform: scale(1);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300906 transform: scale(1);
907}
908.phone-screen::after {
909 content: "";
910 position: absolute;
911 width: 100%;
912 height: 100%;
913 background-color: rgba(250, 250, 250, 0.1);
914}
915
916.phone-side {
917 will-change: transform;
918 width: 13.33em;
919 height: 25em;
920 position: absolute;
921 top: 0;
922 bottom: 0;
923 left: 0;
924 right: 0;
925 margin: auto;
926 border-radius: 1.66em;
927 background-repeat: no-repeat;
928 background-position: 2.2em .5em;
929 background-size: 13.33em 24.73em;
930 -webkit-transform-style: preserve-3d;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200931 -moz-transform-style: preserve-3d;
932 -o-transform-style: preserve-3d;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300933 transform-style: preserve-3d;
934 -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 +0200935 -moz-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
936 -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 +0300937 transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
938 -webkit-transition: all 350ms;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200939 -moz-transition: all 350ms;
940 -o-transition: all 350ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300941 transition: all 350ms;
942}
943
944.phone-side-hover {
945 -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 +0200946 -moz-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
947 -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 +0300948 transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
949 -webkit-transition: all 350ms;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200950 -moz-transition: all 350ms;
951 -o-transition: all 350ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300952}
953
954@-webkit-keyframes figure-anim {
955 from {
956 border-radius: 50%;
957 -webkit-transform: rotate(0deg) scale(1);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200958 -moz-transform: rotate(0deg) scale(1);
959 -o-transform: rotate(0deg) scale(1);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300960 transform: rotate(0deg) scale(1);
961 }
962 to {
963 border-radius: 30%;
964 -webkit-transform: rotate(360deg) scale(0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200965 -moz-transform: rotate(360deg) scale(0.5);
966 -o-transform: rotate(360deg) scale(0.5);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300967 transform: rotate(360deg) scale(0.5);
968 }
969}
970
971@keyframes figure-anim {
972 from {
973 border-radius: 50%;
974 -webkit-transform: rotate(0deg) scale(1);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200975 -moz-transform: rotate(0deg) scale(1);
976 -o-transform: rotate(0deg) scale(1);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300977 transform: rotate(0deg) scale(1);
978 }
979 to {
980 border-radius: 30%;
981 -webkit-transform: rotate(360deg) scale(0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200982 -moz-transform: rotate(360deg) scale(0.5);
983 -o-transform: rotate(360deg) scale(0.5);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300984 transform: rotate(360deg) scale(0.5);
985 }
986}
987@-webkit-keyframes figure-container-anim {
988 from {
989 -webkit-transform: rotate(0deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200990 -moz-transform: rotate(0deg);
991 -o-transform: rotate(0deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300992 transform: rotate(0deg);
993 }
994 to {
995 -webkit-transform: rotate(360deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200996 -moz-transform: rotate(360deg);
997 -o-transform: rotate(360deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300998 transform: rotate(360deg);
999 }
1000}
1001@keyframes figure-container-anim {
1002 from {
1003 -webkit-transform: rotate(0deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +02001004 -moz-transform: rotate(0deg);
1005 -o-transform: rotate(0deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +03001006 transform: rotate(0deg);
1007 }
1008 to {
1009 -webkit-transform: rotate(360deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +02001010 -moz-transform: rotate(360deg);
1011 -o-transform: rotate(360deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +03001012 transform: rotate(360deg);
1013 }
1014}
1015
Henri Koivuneva87bdef32017-08-25 23:50:22 +03001016@media (min-width: 1200px) {
1017 .pull-right-lg {
1018 float: right !important; }
1019 .pull-left-lg {
1020 float: left !important; }
Henri Koivuneva9c1e2432017-11-22 22:01:33 +02001021 .pull-left-md {
1022 float: left !important; }
1023 .container {max-width: 1170px;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +03001024 .portfolio-projects .col-lg-6 {width: 100%}
1025 .navbar > .container {max-width: 1170px}
1026}
1027@media (min-width: 1366px) {
1028 #portfolio > .container, #about > .row {width: 90%;max-width: 1600px;margin-left:auto;margin-right: auto;}
1029 .navbar > .container {max-width: 1170px}
1030}
Unknowne3cf16e2017-11-04 16:32:52 -04001031
1032 /* The alert message box */
1033.alert {
1034 padding: 20px;
1035 background-color: #f44336; /* Red */
1036 color: white;
1037 margin-bottom: 15px;
1038}
Henri Koivunevac2503532017-11-23 04:00:26 +02001039.alert a {color: #fff;font-weight:bolder;padding-bottom:2px;margin-bottom:-2px;box-shadow: 0 2px}
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +02001040@media (max-width:768px) {.alert {width:90%;margin: 0 auto;}}
Henri Koivunevac2503532017-11-23 04:00:26 +02001041@media (max-width:1200px) {.alert {margin-top:3rem}}
Unknowne3cf16e2017-11-04 16:32:52 -04001042/* The close button */
1043.closebtn {
1044 margin-left: 15px;
1045 color: white;
1046 font-weight: bold;
1047 float: right;
1048 font-size: 22px;
1049 line-height: 20px;
1050 cursor: pointer;
1051 transition: 0.3s;
1052}
1053
Unknownb60d9422017-11-27 19:40:08 -05001054/* The alert message box */
1055.alert2 {
1056 padding: 20px;
1057 background-color: #17c13f; /* green */
1058 color: white;
1059 margin-bottom: 15px;
1060}
1061.alert2 a {color: #fff;font-weight:bolder;padding-bottom:2px;margin-bottom:-2px;box-shadow: 0 2px}
1062@media (max-width:768px) {.alert {width:90%;margin: 0 auto;}}
1063@media (max-width:1200px) {.alert {margin-top:3rem}}
1064/* The close button */
1065.closebtn {
1066 margin-left: 15px;
1067 color: white;
1068 font-weight: bold;
1069 float: right;
1070 font-size: 22px;
1071 line-height: 20px;
1072 cursor: pointer;
1073 transition: 0.3s;
1074}
1075
Unknowne3cf16e2017-11-04 16:32:52 -04001076/* When moving the mouse over the close button */
1077.closebtn:hover {
1078 color: black;
Unknownb60d9422017-11-27 19:40:08 -05001079}
Unknown55030612017-11-04 20:28:12 -04001080
1081.vcenter {
1082 display: inline-block;
1083 position: absolute;
1084 left: 50%;
1085 top: 50%;
1086 -webkit-transform: translate(-50%, -50%);
1087 transform: translate(-50%, -50%);
Unknownb60d9422017-11-27 19:40:08 -05001088}
Unknown55030612017-11-04 20:28:12 -04001089
Henri Koivuneva60a08562017-11-23 00:43:58 +02001090/* Anim
Unknownb60d9422017-11-27 19:40:08 -05001091width: 378px;
Henri Koivuneva60a08562017-11-23 00:43:58 +02001092 height: 290px;
1093 */
Unknown55030612017-11-04 20:28:12 -04001094.animation {
1095 display: inline-block;
1096 position: relative;
Unknownb60d9422017-11-27 19:40:08 -05001097 width: 64rem;
1098 height: 42rem;
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001099 margin: -2vh auto 0 auto;
Unknown55030612017-11-04 20:28:12 -04001100 vertical-align: middle;
1101}
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001102@media (max-width:720px) {
1103 .animation {margin-left:-30rem;margin-right:-30rem;}
1104}
1105@media (max-width:450px) {
1106 .animation {width:58rem;height:38rem;}
1107}
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001108@media (max-width:450px) {
1109 .animation {width:58rem;height:38rem;}
1110}
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001111@media (max-width:400px) {
1112 .animation {width:55rem;height:36rem;}
1113}
1114@media (max-width:380px) {
1115 .animation {width:50rem;height:33rem;}
1116}
1117@media (max-width:340px) {
1118 .animation {width:47rem;height:31rem;}
1119}
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001120@media (max-width:320px) {
1121 .animation {width:42rem;height:28rem;}
1122}
1123@media (max-height:650px) {
Henri Koivuneva39d1e2f2017-11-23 04:30:54 +02001124 .animation {margin-top: -7vh !important;margin-bottom: 10vh !important;}
Henri Koivuneva6f33f842017-11-23 03:27:31 +02001125}
1126@media (min-height:651px) {
1127 .animation {margin-top: -8vh !important;margin-bottom: 10vh !important;}
1128}
1129@media (min-height:670px) {
1130 .animation {margin-top: -6.5vh !important;margin-bottom: 10vh !important;}
1131}
1132@media (min-height:720px) {
Henri Koivunevaf259ace2017-11-23 04:28:03 +02001133 .animation {margin-top: -2vh !important;margin-bottom: 10vh !important;overflow-y:visible}
Henri Koivuneva6f33f842017-11-23 03:27:31 +02001134}
1135@media (min-height:800px) {
1136 .animation {margin-top: 0 !important;margin-bottom: 10vh !important;overflow-y:visible}
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001137}
Unknown55030612017-11-04 20:28:12 -04001138.animation .device {
1139 position: absolute;
1140 width: 100%;
1141 height: 100%;
1142 left: 50%;
1143 top: 50%;
1144 background: #111;
1145 -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1146 -moz-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1147 -ms-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1148 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1149 -moz-transform: translate(-50%, -50%);
1150 -ms-transform: translate(-50%, -50%);
1151 -webkit-transform: translate(-50%, -50%);
1152 transform: translate(-50%, -50%);
1153}
1154.animation .device .phone-home-button,
1155.animation .device .tablet-home-button {
1156 position: absolute;
1157 border-radius: 50%;
1158 background: #444;
1159 opacity: 0;
1160 z-index: 1;
1161 -webkit-transition: all 0.4s ease;
1162 -moz-transition: all 0.4s ease;
1163 -ms-transition: all 0.4s ease;
1164 transition: all 0.4s ease;
1165}
1166.animation .device .phone-home-button {
1167 width: 16px;
1168 height: 16px;
1169 margin-top: -8px;
1170 right: 11px;
1171 top: 50%;
1172}
1173.animation .device .tablet-home-button {
1174 width: 12px;
1175 height: 12px;
1176 margin-left: -6px;
1177 bottom: 7px;
1178 left: 50%;
1179}
1180.animation .device .screen-stand {
1181 position: absolute;
1182 width: 100%;
1183 margin-left: -10px;
1184 margin-top: -1px;
1185 top: 60%;
1186 opacity: 0;
1187 z-index: 1;
1188 -webkit-transition: all 0.4s ease-out;
1189 -moz-transition: all 0.4s ease-out;
1190 -ms-transition: all 0.4s ease-out;
1191 transition: all 0.4s ease-out;
1192}
1193.animation .device .screen-stand .leg {
1194 position: absolute;
1195 width: 12px;
1196 height: 16px;
1197 left: 50%;
1198 top: 0;
1199 margin-left: -6px;
1200 background: #111;
1201}
1202.animation .device .screen-stand .foot {
1203 position: absolute;
1204 width: 120px;
1205 height: 4px;
1206 left: 50%;
1207 top: 15px;
1208 margin-left: -60px;
1209 border-top-left-radius: 2px;
1210 border-top-right-radius: 2px;
1211 background: #111;
1212}
1213.animation .device .display {
1214 position: relative;
1215 width: 100%;
1216 height: 100%;
1217 overflow: hidden;
1218 background: #34495e;
1219 z-index: 3;
1220}
1221.animation .device .display div {
1222 position: absolute;
1223 width: 100%;
1224 height: 100%;
1225 left: 100%;
1226 white-space: nowrap;
1227 -webkit-transition: all 0.4s ease;
1228 -moz-transition: all 0.4s ease;
1229 -ms-transition: all 0.4s ease;
1230 transition: all 0.4s ease;
1231}
1232.animation .device .display div div {
1233 position: absolute;
1234 width: 100%;
1235 left: 0;
1236 top: 50%;
1237 margin-top: -14px;
Henri Koivuneva60a08562017-11-23 00:43:58 +02001238 font-size: 20px;
Unknown55030612017-11-04 20:28:12 -04001239 text-align: center;
Henri Koivuneva60a08562017-11-23 00:43:58 +02001240 /* color: #0080ff;*/
Unknown55030612017-11-04 20:28:12 -04001241}
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001242@media (max-width:450px) {
1243 .animation .device .display div div {width:100%;max-width:100%;font-size:12px !important;}
1244}
Henri Koivuneva60a08562017-11-23 00:43:58 +02001245 .animation .device .display .slide1 div {margin-top:0px;}
Unknown55030612017-11-04 20:28:12 -04001246.animation .device .display div div em {
1247 font-weight: bold;
1248}
1249.animation .device .display .slide1 {
Unknownd5655a22018-02-25 12:18:43 -05001250 /* background: #000; */
1251 background: url("https://i.imgur.com/wCp0xpe.jpg");
Henri Koivuneva60a08562017-11-23 00:43:58 +02001252 background-size: cover;
1253 background-repeat: no-repeat;
1254 background-position: center center;
1255 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,
1256 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,
1257 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,
1258 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;
1259 color:white;
Unknown55030612017-11-04 20:28:12 -04001260}
1261.animation .device .display .slide2 {
Unknownd5655a22018-02-25 12:18:43 -05001262 /* background: #000; */
1263 background: url("https://i.imgur.com/KfArkPZ.jpg");
Henri Koivuneva60a08562017-11-23 00:43:58 +02001264 background-size: cover;
1265 background-repeat: no-repeat;
1266 background-position: center center;
1267 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,
1268 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,
1269 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,
1270 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;
1271 color:#0080ff;
Unknown55030612017-11-04 20:28:12 -04001272}
1273.animation .device .display .slide3 {
Unknownd5655a22018-02-25 12:18:43 -05001274 /* background: #000; */
1275 background: url("https://i.imgur.com/c55mey7.jpg");
Henri Koivuneva60a08562017-11-23 00:43:58 +02001276 background-size: cover;
1277 background-repeat: no-repeat;
1278 background-position: center center;
1279 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,
1280 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,
1281 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,
1282 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;
1283 color:white;
Unknown55030612017-11-04 20:28:12 -04001284}
1285.animation[data-animation-step="1"] .device {
Henri Koivuneva60a08562017-11-23 00:43:58 +02001286 width: 87%;
1287 height: 90%;
Unknown55030612017-11-04 20:28:12 -04001288 padding: 10px;
1289 border-radius: 4px;
1290}
1291.animation[data-animation-step="1"] .device .slide1 {
1292 left: 0%;
1293}
1294.animation[data-animation-step="1"] .device .screen-stand {
1295 opacity: 1;
1296 top: 100%;
1297}
1298.animation[data-animation-step="2"] .device {
Henri Koivuneva60a08562017-11-23 00:43:58 +02001299 width: 74%;
1300 height: 75%;
1301 padding: 16px;
Unknown55030612017-11-04 20:28:12 -04001302 border-radius: 10px;
1303}
1304.animation[data-animation-step="2"] .device .slide1 {
1305 left: -100%;
1306}
1307.animation[data-animation-step="2"] .device .slide2 {
1308 left: 0%;
1309}
1310.animation[data-animation-step="2"] .device .tablet-home-button {
1311 opacity: 1;
1312}
1313.animation[data-animation-step="3"] .device {
Henri Koivuneva60a08562017-11-23 00:43:58 +02001314 width: 27%;
1315 height: 75%;
Henri Koivuneva1cdd2cd2017-11-23 02:12:44 +02001316 padding: 16px 4px;
Unknown55030612017-11-04 20:28:12 -04001317 border-radius: 6px;
1318}
1319.animation[data-animation-step="3"] .device .slide1,
1320.animation[data-animation-step="3"] .device .slide2 {
1321 left: -100%;
1322}
1323.animation[data-animation-step="3"] .device .slide3 {
1324 left: 0%;
1325}
1326.animation[data-animation-step="3"] .device .phone-home-button {
1327 opacity: 1;
1328}
Henri Koivuneva6f33f842017-11-23 03:27:31 +02001329 @media (min-height:800px) {
1330 .animation[data-animation-step="1"] .device {width:87%; height:90%;}
1331 .animation[data-animation-step="2"] .device {width:80%; height:80%;}
1332 .animation[data-animation-step="3"] .device {width:28%; height:80%;}
1333 }
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001334 @media (max-height:720px) {
1335 .animation[data-animation-step="1"] .device {width:72%; height:75%;}
1336 .animation[data-animation-step="2"] .device {width:59%; height:60%;}
Henri Koivuneva9f8af432017-11-23 05:00:30 +02001337 .animation[data-animation-step="3"] .device {width:22%; height:63%;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001338 .animation .device .display div div {font-size:16px;}
1339 }
1340 @media (max-height:650px) {
1341 .animation[data-animation-step="1"] .device {width:62%; height:65%;}
1342 .animation[data-animation-step="2"] .device {width:54%; height:55%;}
Henri Koivunevad27df022017-11-23 05:12:58 +02001343 .animation[data-animation-step="3"] .device {width:22%; height:63%;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001344 .animation .device .display div div {font-size:15px;}
1345 }
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001346 @media (max-width:560px) {
Henri Koivunevabd03c012017-11-23 02:20:26 +02001347 .animation[data-animation-step="1"] .device {margin-top:1%;width:72%; height:75%;}
1348 .animation[data-animation-step="2"] .device {margin-top:1%;width:65%; height:66%;}
1349 .animation[data-animation-step="3"] .device {margin-top:1%;width:28%; height:80%;}
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001350 .animation .device .display div div {font-size:15px;}
1351 }
1352 @media (max-width:520px) {
1353 .animation[data-animation-step="1"] .device {margin-top:0%;width:66%; height:69%;}
1354 .animation[data-animation-step="2"] .device {margin-top:0%;width:62%; height:63%;}
Henri Koivunevabd03c012017-11-23 02:20:26 +02001355 .animation[data-animation-step="3"] .device {margin-top:0%;width:28%; height:80%;}
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001356 .animation .device .display div div {font-size:15px;}
1357 }
1358 @media (max-width:460px) {
1359 .animation[data-animation-step="1"] .device {margin-top:0%;width:58%; height:61%;}
1360 .animation[data-animation-step="2"] .device {margin-top:0%;width:54%; height:55%;}
Henri Koivuneva0e02df62017-11-23 04:33:04 +02001361 .animation[data-animation-step="3"] .device {margin-top:0%;width:25%; height:72%;}
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001362 .animation .device .display div div {font-size:15px;}
1363 }
Henri Koivuneva0d2da122017-11-23 01:22:34 +02001364 @media (max-width:350px) {
1365 .animation[data-animation-step="1"] .device {margin-top:3%;width:62%; height:65%;}
1366 .animation[data-animation-step="2"] .device {margin-top:3%;width:58%; height:60%;}
1367 .animation[data-animation-step="3"] .device {margin-top:9%;width:30%; height:80%;}
1368 .animation .device .display div div {font-size:15px;}
1369 }
Henri Koivuneva9d598a52017-11-23 01:56:48 +02001370 @media (max-width:320px) {
1371 .animation[data-animation-step="1"] .device {margin-top:6%;width:62%; height:65%;}
1372 .animation[data-animation-step="2"] .device {margin-top:6%;width:58%; height:60%;}
1373 .animation[data-animation-step="3"] .device {margin-top:12%;width:30%; height:80%;}
1374 .animation .device .display div div {font-size:15px;}
1375 }
Henri Koivuneva9c1e2432017-11-22 22:01:33 +02001376
1377/* More media queries */
1378@media (max-width: 430px) {
1379 h2, .h2 {font-size: 30px;}
Unknownb60d9422017-11-27 19:40:08 -05001380}