Gitiles
Code Review Sign In
review.blissroms.org / blissroms.github.io / b6b68af12245bd527e0a45a41b48829e503d2e99 / . / css / style.css
blob: 9ac95dc5c7907b9003b2eafc10ecc3c6c0fb6560 [file] [log] [blame]
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]1img {
2 width: 100%; }
3
4body {
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]5 font-family: "Comfortaa", Helvetica, Arial, sans-serif;
Henri Koivuneva468d1692017-08-12 16:24:41 +0300[diff] [blame]6 line-height: 1.4;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]7 background-color: #0080ff;
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]8 }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]9
Henri Koivuneva468d1692017-08-12 16:24:41 +0300[diff] [blame]10h1, .h1,
11h2, .h2,
12h3, .h3,
13h4, .h4,
14h5, .h5,
15h6, .h6 {
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]16 font-family: "Comfortaa", Helvetica, Arial, sans-serif;
Henri Koivuneva468d1692017-08-12 16:24:41 +0300[diff] [blame]17 line-height: 1.4;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]18 color: #07374a; }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]19h1, .h1 {font-size: 64px;}
20h2, .h2 {font-size: 42px;}
21h4, .h4 {font-weight: bolder;}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]22
23p {
24 font-family: "Comfortaa", sans-serif;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]25 color: #ffffff;
26 margin: 0 0 30px; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]27
Henri Koivuneva0f988192017-08-12 15:28:05 +0300[diff] [blame]28a, .btn {
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300[diff] [blame]29 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]30 -moz-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
31 -o-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300[diff] [blame]32 transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
Henri Koivuneva0f988192017-08-12 15:28:05 +0300[diff] [blame]33}
34
Henri Koivuneva7f266022017-08-12 15:25:19 +0300[diff] [blame]35a:hover, a:focus, a:active {text-decoration: none;}
36
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]37body > .container-fluid {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300[diff] [blame]38 padding: 0; }
Henri Koivuneva7edca392017-08-12 16:23:52 +0300[diff] [blame]39
Henri Koivunevaf63e2a92017-08-12 16:37:49 +0300[diff] [blame]40#portfolio > .container {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]41 padding-left: 30px;
42 padding-right: 30px;
43}
44#portfolio > div > div > div {padding-right: 0;padding-left: 0}
Henri Koivunevaf63e2a92017-08-12 16:37:49 +0300[diff] [blame]45
Unknowne3cf16e2017-11-04 16:32:52 -0400[diff] [blame]46#family-lt > .container {
47 padding-left: 30px;
48 padding-right: 30px;
Unknownb60d9422017-11-27 19:40:08 -0500[diff] [blame]49 font-size: 18px;
Unknowne3cf16e2017-11-04 16:32:52 -0400[diff] [blame]50}
51#family-lt > div > div > div {padding-right: 0;padding-left: 0}
52
Henri Koivunevabcf672a2017-08-12 16:25:03 +0300[diff] [blame]53.row,
54.container-fluid>.navbar-collapse,
55.container-fluid>.navbar-header,
56.container>.navbar-collapse,
57.container>.navbar-header {
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]58 margin:auto;
59}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]60
61.container-fluid .text-muted {
62 margin: 20px 0; }
63
64.btn:focus, a:focus {
65 outline: none !important; }
66
67.navbar {
68 height: 70px;
69 background-color: transparent;
70 background: transparent;
71 border: none;
72 color: #ffffff;
73 z-index: 100;
74 margin-bottom: 0;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]75 padding-left: 30px;
76 padding-right: 30px;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]77 border-radius: 0;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300[diff] [blame]78 -webkit-transition: background-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]79 -moz-transition: background-color .2s ease 0s;
80 -o-transition: background-color .2s ease 0s;
Unknown2e345c42017-08-14 18:25:38 -0400[diff] [blame]81 transition: background-color .2s ease 0s; }
Henri Koivuneva3de908d2017-08-13 02:43:42 +0300[diff] [blame]82.navbar > .container {padding: 4px 0 0 0;width: 100%;margin-top:2px;}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]83.navbar-brand {
Henri Koivunevae1841232017-08-12 21:55:21 +0300[diff] [blame]84 opacity: 0;
Henri Koivuneva3de908d2017-08-13 02:43:42 +0300[diff] [blame]85 margin-top: 5px;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]86 padding: 15px 0;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]87 color: #ffffff;
88 font-weight: 400; }
89
90.navbar-default .navbar-nav > li > a {
91 color: #ffffff;
92 font-weight: 500;
93 font-size: 1em;
94 text-transform: lowercase;
Henri Koivuneva3de908d2017-08-13 02:43:42 +0300[diff] [blame]95 margin: 3px 5px;
Henri Koivunevac93da972017-08-12 15:18:06 +0300[diff] [blame]96 border: 1px solid transparent;
Henri Koivuneva4d964cb2017-08-12 15:22:55 +0300[diff] [blame]97 border-radius: 5px;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300[diff] [blame]98 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]99 -moz-transition: color .2s ease 0s, border-color .2s ease 0s;
100 -o-transition: color .2s ease 0s, border-color .2s ease 0s;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300[diff] [blame]101 transition: color .2s ease 0s, border-color .2s ease 0s; }
Henri Koivunevabcf672a2017-08-12 16:25:03 +0300[diff] [blame]102 .navbar-default .navbar-nav > li:last-child > a {margin-right: 0}
Henri Koivunevac93da972017-08-12 15:18:06 +0300[diff] [blame]103.navbar-default .navbar-nav > li > a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]104 color: #ffffff;
105 border: 1px solid #ffffff; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300[diff] [blame]106.navbar-default .navbar-nav > li > a:active,
107.navbar-default .navbar-nav > li > a:focus,
108.navbar.solid .navbar-nav > li > a:active, .navbar.solid .navbar-nav > li > a:focus {
109 color: rgba(255,255,255,0.8);
110 border: 1px solid rgba(255,255,255,0.8); }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]111.navbar-default .navbar-nav > li > a:visited {
112 color: #ffffff;
113 text-decoration: none; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300[diff] [blame]114.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]115 background-color: transparent;
116 color: #ffffff; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300[diff] [blame]117.navbar-default .navbar-nav > .active > a:focus,
118.navbar.solid .navbar-nav > li > a:active,
119.navbar.solid .navbar-nav > li > a:focus {
120 background-color: transparent;
121 color: rgba(255,255,255,0.8); }
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]122.navbar-toggle {margin-right:0;padding:15px;}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]123.navbar-default .navbar-toggle {
124 border-color: #ffffff; }
125 .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]126 background-color: #07374a;
127 }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]128 .navbar-default .navbar-toggle .icon-bar {
129 color: #ffffff;
130 background-color: #ffffff; }
Henri Koivuneva6b7c7962017-08-12 21:54:58 +0300[diff] [blame]131.navbar-default .navbar-collapse.collapse.in ul {
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]132 background-color: #07374a;
133}
Henri Koivuneva6b7c7962017-08-12 21:54:58 +0300[diff] [blame]134.navbar-collapse.collapsing {
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]135 background-color: #07374a;
Henri Koivuneva5e6ed7a2017-08-12 18:14:02 +0300[diff] [blame]136}
137.navbar-default .navbar-toggle .icon-bar {
138 color: #ffffff;
139 background-color: #ffffff; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]140.navbar-default .navbar-collapse.collapse.in ul {
nilac8991c1655032017-08-19 12:37:44 +0200[diff] [blame]141 background-color: #07374a;
Henri Koivuneva5e6ed7a2017-08-12 18:14:02 +0300[diff] [blame]142}
Unknown94e4caa2017-08-12 10:48:07 -0400[diff] [blame]143.navbar-collapse.collapse.collapsing {
144 background-color: #07374a;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]145}
nilac8991c1655032017-08-19 12:37:44 +0200[diff] [blame]146
Henri Koivuneva5e6ed7a2017-08-12 18:14:02 +0300[diff] [blame]147.navbar-collapse.collapse.show {
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]148 background-color: #07374a;
149 -webkit-transition: background-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]150 -moz-transition: background-color .2s ease 0s;
151 -o-transition: background-color .2s ease 0s;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]152 transition: background-color .2s ease 0s;
Henri Koivunevae15afea2017-08-12 18:23:45 +0300[diff] [blame]153 -webkit-border-bottom-left-radius: 4px;
154 -webkit-border-bottom-right-radius: 4px;
155 border-bottom-left-radius: 4px;
156 border-bottom-right-radius: 4px;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]157}
Henri Koivuneva936cb392017-08-12 18:49:20 +0300[diff] [blame]158
159.navbar-collapse .navbar-nav > li > a,
160.navbar-collapse .navbar-nav > li > a:hover,
161.navbar-collapse .navbar-nav > li > a:focus,
162.navbar-collapse .navbar-nav > li > a:active {
163 border-color: transparent !important;
164}
165
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]166/* Solid class attached on scroll past first section */
167.navbar.solid {
168 background-color: #07374a;
Unknown2e345c42017-08-14 18:25:38 -0400[diff] [blame]169 top: 0;
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]170 width: 100%;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]171 margin: 0;
172 box-shadow: 0 7px 8px 0 rgba(0,0,0,0.3);
173 -webkit-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
174 -moz-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
175 -o-transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
176 transition: background-color .2s ease 0s, box-shadow .2s ease 0s;
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]177 }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]178 .navbar.solid .navbar-brand {
Henri Koivunevae1841232017-08-12 21:55:21 +0300[diff] [blame]179 opacity: 1;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]180 display: inline-block;
181 color: #ffffff;
Henri Koivunevae1841232017-08-12 21:55:21 +0300[diff] [blame]182 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]183 -moz-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
184 -o-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
Henri Koivunevae1841232017-08-12 21:55:21 +0300[diff] [blame]185 transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]186 .navbar.solid .navbar-nav > li > a {
187 color: #ffffff;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300[diff] [blame]188 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]189 -moz-transition: color .2s ease 0s, border-color .2s ease 0s;
190 -o-transition: color .2s ease 0s, border-color .2s ease 0s;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300[diff] [blame]191 transition: color .2s ease 0s, border-color .2s ease 0s; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]192
193.cover {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300[diff] [blame]194 padding: 6% 0 8% 0; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]195 .cover.top {
Henri Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]196 padding: 10vh 0 15vh 0;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]197 height: 100vh;
198 display: -webkit-box;
199 display: -ms-flexbox;
200 display: flex;
201 background-color: #0080ff; }
202 .cover.bottom {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300[diff] [blame]203 padding: 6% 0 5.5% 0; }
204 body > .cover.bottom:nth-child(4) {padding: 6% 0 5.5% 0 !important}
Henri Koivuneva04797472017-08-12 18:35:39 +0300[diff] [blame]205 @media (max-width: 550px) {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]206 .cover, .cover.bottom {padding: 17.5% 30px 17.5% 30px; } }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]207
208.headline {
209 padding-top: 6.25em; }
Henri Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]210 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]211 max-width: 1600px;
212 width: 100%;
Henri Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]213 margin: 0 auto;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]214 padding-right: 30px;
215 padding-left: 30px;
Henri Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]216 display: block; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]217 @media screen and (min-width: 768px) {
218 .headline {
219 padding-top: 3.75em; } }
220 @media screen and (min-width: 992px) {
221 .headline {
222 padding-top: 1.5625em; } }
223 @media screen and (min-width: 1200px) {
224 .headline {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]225 padding-top: 0; } }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]226
227#about {
228 background-color: #07374a; }
229 #about h2 {
230 color: #0080ff; }
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300[diff] [blame]231 #about > div > div.row.break > div > p {margin-bottom: 15px}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]232
233.profile-img {
234 margin-bottom: 15px;
235 width: 120px; }
236
237.about, .about-info, .about-tools, .about-last {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]238 padding: 4% 30px 1% 30px;
239 font-size: 18px; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]240 .about-tools {
241 padding-top: 4.375em;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]242 font-size: 18px; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]243 @media screen and (min-width: 992px) {
244 .about-tools {
245 padding-top: 5.625em; } }
246 .about-tools ul:first-child {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]247 padding-left: 0; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]248 .about-tools ul {
249 color: #0080ff;
250 list-style: none; }
251 .about-tools ul li {
252 padding-top: 0.75em; }
253 .about-last {
254 padding-top: 3.125em;
255 padding-bottom: 0;
256 font-size: 1.125em; }
257 @media screen and (min-width: 992px) {
258 .about-last {
259 padding-top: 0; } }
260 .about-last p {
261 color: #0080ff; }
262
263#portfolio {
264 background-color: #0080ff; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]265
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]266.portfolio-projects--btn {
267 background: transparent;
268 color: #07374a;
269 border: 1px solid #07374a;
270 border-radius: 5px;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]271 margin-bottom: 1.25em;
272 font-size: 18px;
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200[diff] [blame]273 margin: 8px; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]274 .portfolio-projects--btn:hover {
275 background: #07374a;
276 color: #ffffff; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300[diff] [blame]277 .portfolio-projects--btn:focus,
278 .portfolio-projects--btn:active {
279 background: #052a38;
280 color: #ffffff; }
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]281@media (max-width:650px) {
282 .portfolio-projects--btn {font-size:16px;}
283}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]284.portfolio-projects--image {
285 margin-bottom: 1.875em;
286 padding-top: 5%; }
287
Henri Koivunevabe19c192017-11-22 22:14:33 +0200[diff] [blame]288.about-tools ul li, .contact-social-icons ul a li {
289 text-align: center; }
290
291.centered {
292 float: none;
293 margin-left: auto;
294 margin-right: auto; }
295
296
297.vcenter {
298 display: inline-block;
299 vertical-align: middle;
300 float: none; }
301
302.break {
303 clear: both;
304 margin-top: 10px; }
305
306@media (min-width: 360px) {
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]307 #team > .container .row > div {width: 100%;margin: 0;}
308}
309
Henri Koivunevabe19c192017-11-22 22:14:33 +0200[diff] [blame]310@media (min-width: 768px) {
311 .pull-right-sm {
312 float: right !important; }
313 .pull-left-sm {
314 float: left !important; }
315 .container {width: 768px}
316 .navbar-right {margin-right: 0;}
317 .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {margin-left: 0;padding-left: 15px}
318}
319@media (min-width: 992px) {
320 .pull-right-md {
321 float: right !important; }
322 .pull-left-md {
323 float: left !important; }
324 .container {width: 94%;}
325}
326@media (min-width: 1200px) {
327 .pull-right-lg {
328 float: right !important; }
329 .pull-left-lg {
330 float: left !important; }
331 .container {width: 1170px;}
332 .portfolio-projects .col-lg-6 {width: 100%}
333 .navbar > .container {max-width: 1170px}
334}
335@media (min-width: 1366px) {
336 #portfolio > .container, #about > .row {width: 90%;max-width: 1600px;margin-left:auto;margin-right: auto;}
337 .navbar > .container {max-width: 1170px}
338}
339
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200[diff] [blame]340@media (max-width:768px) {
341 .portfolio-projects--desc {
342 margin-top: 30px;
343 margin-bottom: 30px;
344 font-size: 16px; }
345}
Henri Koivunevabe19c192017-11-22 22:14:33 +0200[diff] [blame]346@media (min-width: 768px) {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]347 .portfolio-projects {
348 margin-top: 0.625em; } }
349.portfolio-projects--title {
350 margin-top: 0.9375em;
351 font-size: 20px; }
Henri Koivunevabe19c192017-11-22 22:14:33 +0200[diff] [blame]352@media (min-width: 768px) {
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200[diff] [blame]353 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 21px;margin-top:0rem;}
354 .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 +0300[diff] [blame]355 .portfolio-projects--desc {
356 margin-top: 30px;
357 margin-bottom: 30px;
358 font-size: 16px; }
359 .portfolio-projects--btn {font-size: 14px;margin:0 4px 16px 4px;}
360 #portfolio > div > div > div:nth-child(1) > div > div.col-sm-5.text-center,
361 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-7.text-center.pull-right-sm {padding-left:0;}
362 #portfolio > div > div > div:nth-child(1) > div > div.col-sm-7.text-center,
363 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm {padding-right: 0;} }
364 @media screen and (min-width: 992px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200[diff] [blame]365 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 21px;margin-top:0rem;}
366 .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 +0300[diff] [blame]367 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-left:-8px;}
368 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(5) {margin-right:-8px;} }
369 @media screen and (min-width: 1080px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200[diff] [blame]370 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 21px;margin-top:3.75rem;}
371 .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 +0300[diff] [blame]372 }
373 @media screen and (min-width: 1200px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200[diff] [blame]374 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 24px;margin-top:2.5rem;}
375 .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 +0300[diff] [blame]376 .portfolio-projects--desc {
Henri Koivunevac2503532017-11-23 04:00:26 +0200[diff] [blame]377 margin-top: 24px;
378 margin-bottom: 24px;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]379 font-size: 18px; }
380 .portfolio-projects .col-lg-6 + .col-lg-6 + .col-lg-6 {margin-top:40px}
Henri Koivunevac2503532017-11-23 04:00:26 +0200[diff] [blame]381 .portfolio-projects--btn {font-size: 18px;margin:8px;} }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]382 @media screen and (min-width: 1366px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200[diff] [blame]383 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {margin-top:7.5rem;}
384 .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {margin-top:6rem;}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]385 }
386 @media (min-width: 1500px) {
Henri Koivunevac2503532017-11-23 04:00:26 +0200[diff] [blame]387 .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 28px;margin-top:11rem;}
388 .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {font-size: 28px;margin-top:9.5rem;}
389 .portfolio-projects--btn {font-size: 18px;}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]390 }
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200[diff] [blame]391 .portfolio-projects--image-title {margin-top:-3rem;margin-bottom:6rem;}
392 @media (max-width: 768px) {
393 .portfolio-projects--image-title {margin-top:-3rem;margin-bottom:3rem;}
394 }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]395
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]396#contact {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]397 background-color: #07374a;
398 padding-left: 15px;
399 padding-right: 15px }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]400 #contact h2 {
401 color: #0080ff; }
402
403.contact-social-icons p {
404 color: #0080ff; }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]405.contact-social-icons > ul {padding:0;margin:0 auto;}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]406.contact-social-icons ul a {
407 color: #0080ff;
408 list-style: none; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300[diff] [blame]409 .contact-social-icons ul a:hover,
Henri Koivunevabef78a62017-08-12 22:32:07 +0300[diff] [blame]410 .team-links-list a:hover,
411 .family-links-list a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]412 color: #ffffff; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300[diff] [blame]413 .contact-social-icons ul a:focus,
414 .contact-social-icons ul a:active,
415 .team-links-list a:focus,
Henri Koivunevabef78a62017-08-12 22:32:07 +0300[diff] [blame]416 .team-links-list a:active,
417 .family-links-list a:focus,
418 .family-links-list a:active {
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300[diff] [blame]419 color: rgba(255,255,255,0.8); }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]420 .contact-social-icons ul a li {
421 display: inline-block;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]422 padding: 1.25%;
423 font-size: 16px }
Henri Koivuneva16234182017-08-13 03:09:43 +0300[diff] [blame]424 @media (max-width: 1200px) {
Henri Koivunevac9c6ac62017-08-13 03:12:28 +0300[diff] [blame]425 #family > div > div.row > div.center > div {margin:1.5em 4% 3em 4%;width:42%;float:left;}
Henri Koivuneva16234182017-08-13 03:09:43 +0300[diff] [blame]426 #family > div > div.row > div.center > div:last-child {margin-bottom: 0}
427 }
428 @media (max-width: 720px) {
429 #family > div > div.row > div.center > div {margin:1.5em 4% 3em 4%;width:92%;}
430 }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]431
432.footer {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300[diff] [blame]433 padding-top: 1em;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]434 bottom: 0;
435 width: 100%;
436 /* Set the fixed height of the footer here */
Unknownf0310a82017-08-12 19:32:49 -0400[diff] [blame]437 background-color: #052a38;
438
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]439 color: #ffffff; }
electrikjesus34f27d12017-08-12 17:13:35 -0400[diff] [blame]440.footer-role, .footer-name, .footer-description {
441 color: #FFFFFF;
442}
443.footer-description {
444 color: #fff;
445 font-size: 18px;
446}
447.footer-role h4, .footer-links-list a {
448 color: #0080ff;
449}
450.footer-header h4 {
451 color: #0080ff;
452}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]453#scrollIcon, #scrollTopIcon {
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200[diff] [blame]454 margin-top: 4vh;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]455 padding: 10px;
456 font-size: 1.5em;
457 color: #07374a;
458 border: solid 2px #07374a;
459 border-radius: 50%; }
460
461#scrollTopIcon {
462 margin-top: 10px;
463 font-size: 1em;
464 color: #ffffff;
465 border-color: #ffffff; }
466
467.back-to-top {
468 display: none; }
469 .back-to-top.visible {
470 display: block; }
Unknown423f0342017-07-30 16:44:34 -0400[diff] [blame]471
472/* our team section */
Henri Koivunevabef78a62017-08-12 22:32:07 +0300[diff] [blame]473#team, #family {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]474 background-color: #0080ff;
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]475 /*font-weight: 700;
476 font-size: 21px; */
Unknown423f0342017-07-30 16:44:34 -0400[diff] [blame]477}
478.hr.invisible_hr {
479 height: 0;
480 padding: 0;
481}
482.hr.big_size_hr {
483 margin: 30px 0;
484}
485.hr {
486 clear: both;
487 display: block;
488 font-size: 0;
489 height: 24px;
490 margin: 20px 0;
491 overflow: hidden;
492 padding: 2px 0;
493 position: relative;
494 text-align: center;
495 width: 100%;
496}
497.highlight_secondary {
498 color: #FFFFFF;
499}
Henri Koivuneva984bf522017-08-12 14:51:57 +0300[diff] [blame]500.team-role, .team-name, .team-links-list a {
Unknown423f0342017-07-30 16:44:34 -0400[diff] [blame]501 color: #07374a;
nilac8991c1655032017-08-19 12:37:44 +0200[diff] [blame]502 text-align: center;
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]503 white-space: normal;
504 width: 100%;
Unknown4f1903e2017-07-30 19:40:03 -0400[diff] [blame]505}
nilac8991c1655032017-08-19 12:37:44 +0200[diff] [blame]506.team-name, .family-name {
507 font-size: 21px;
508 text-align: center;
509 white-space: nowrap;
510}
Henri Koivunevabef78a62017-08-12 22:32:07 +0300[diff] [blame]511.team-links, .family-links {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]512 padding-top: .75em;
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]513 color: #07374a;
nilac8991c1655032017-08-19 12:37:44 +0200[diff] [blame]514 text-align: center;
Henri Koivuneva984bf522017-08-12 14:51:57 +0300[diff] [blame]515}
Henri Koivunevabef78a62017-08-12 22:32:07 +0300[diff] [blame]516.team-image img, .family-image img {
Henri Koivunevac5e99ce2017-08-12 15:59:30 +0300[diff] [blame]517 max-width:150px;
518 max-height: 150px;
519 margin:0 auto;
Henri Koivuneva4c866502017-08-12 17:14:37 +0300[diff] [blame]520}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]521#team > .container .row > div {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]522 min-height: 0;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]523 padding-left: 0;
524 padding-right: 0;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]525 /* display: flex; */
526 /* flex-wrap: wrap; */
527 /* justify-content: flex-start; */
528}
529 @media (min-width: 768px) {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]530 #team > .container .row > div {min-height: 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]531 #team .col-sm-4 {
532 width: 100%;
533 margin: 0;
534 }
535 }
536 @media (min-width: 992px) {
537 #team .col-md-2 {
538 width: 100%;
539 margin: 0;
540 }
541 }
542 @media (min-width: 1200px) {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]543 #team > .container .row > div {min-height: 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]544 }
545 @media (max-width: 700px) {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]546 #team > .container .row > div {min-height: 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]547 #team .col-xs-6 {width: 42%;margin:4%;}
548 }
549 @media (max-width: 500px) {
550 #team > .container .row > div {min-height: 250px;}
551 #team .col-xs-6 {width: 92%;margin:4%;}
552 }
553#team > .container .row > .row, #team > .container {padding-left:0;padding-right: 0}
554
555/* Bliss family section */
556#family {
557 background-color: #07374a;
558}
559#family > div > div.row > div {font-size: 18px}
560.family-role, .family-name, .family-description {
561 color: #FFFFFF;
562}
563.family-description {
564 color: #fff;
565 font-size: 18px;
566}
567.family-role h4, .family-links-list a {
568 color: #0080ff;
569}
570.family-header h2 {
571 color: #0080ff;
572}
573#family .about-tools {
574 font-size: 20px;
575}
576.family-image img {
577 max-width:150px;
578 max-height: 150px;
579 margin:0 auto;
580}
581.family-projects--btn {
582 background: transparent;
Unknown7e529f82017-11-04 16:44:32 -0400[diff] [blame]583 color: #0080ff;
584 border: 1px solid #0080ff;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]585 border-radius: 5px;
586 margin-bottom: 1.25em;
587 font-weight: 700;
588 font-size: 21px; }
589 .family-projects--btn:hover {
Unknown7e529f82017-11-04 16:44:32 -0400[diff] [blame]590 background: #0080ff;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]591 color: #ffffff; }
592 .family-projects--btn:focus,
593 .family-projects--btn:active {
Unknown7e529f82017-11-04 16:44:32 -0400[diff] [blame]594 background: #0080ff;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]595 color: #ffffff; }
596
Henri Koivuneva3492c6c2017-11-23 04:45:03 +0200[diff] [blame]597
598@media (min-height: 880px) {
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200[diff] [blame]599 #scrollIcon, #scrollTopIcon {margin-top: 4vh;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]600}
Henri Koivuneva3492c6c2017-11-23 04:45:03 +0200[diff] [blame]601@media (min-height: 900px) {
602 #scrollIcon, #scrollTopIcon {margin-top: 6vh;}
603}
604@media (min-height: 960px) {
605 #scrollIcon, #scrollTopIcon {margin-top: 10vh;}
606}
607@media (min-height: 980px) {
608 #scrollIcon, #scrollTopIcon {margin-top: 12vh;}
609}
610@media (min-height: 1020px) {
611 #scrollIcon, #scrollTopIcon {margin-top: 14vh;}
612}
613@media (min-height: 1090px) {
614 #scrollIcon, #scrollTopIcon {margin-top: 16vh;}
615}
616@media (max-height: 880px) {
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200[diff] [blame]617 #scrollIcon, #scrollTopIcon {margin-top: 2vh;}
Henri Koivuneva3492c6c2017-11-23 04:45:03 +0200[diff] [blame]618}
619@media (max-height: 850px) {
620 #scrollIcon, #scrollTopIcon {margin-top: 0vh;}
621}
622@media (max-height: 820px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]623 #scrollIcon, #scrollTopIcon {margin-top: -2vh;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]624 .cover.top {padding: 7.5vh 0 12.5vh 0;}
625}
626@media (max-height: 750px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]627 #scrollIcon, #scrollTopIcon {margin-top: -8vh;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]628}
629@media (max-height: 720px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]630 #scrollIcon, #scrollTopIcon {margin-top: -8vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]631}
632@media (max-height: 690px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]633 #scrollIcon, #scrollTopIcon {margin-top: -10vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]634 .animation {margin-top:-6vh !important;}
635}
636@media (max-height: 670px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]637 #scrollIcon, #scrollTopIcon {margin-top: -14vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]638 .animation {margin-top:-7vh !important;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]639}
640@media (max-height: 650px) {
Henri Koivunevaf259ace2017-11-23 04:28:03 +0200[diff] [blame]641 #scrollIcon, #scrollTopIcon {margin-top: -14vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]642 .animation {margin-top:-8vh !important;}
643 .cover.top {padding: 6vh 0 5vh 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]644 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 42vh;}
645}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]646@media (max-height: 630px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]647 #scrollIcon, #scrollTopIcon {margin-top: -19vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]648 .animation {margin-top:-10vh !important;}
649 .cover.top {padding: 6vh 0 5vh 0;}
650}
651@media (max-height: 600px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]652 #scrollIcon, #scrollTopIcon {margin-top: -20vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]653 .animation {margin-top:-13vh !important;}
654 .cover.top {padding: 6vh 0 5vh 0;}
655}
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]656@media (max-height: 600px) and (orientation:landscape) {
657 #scrollIcon, #scrollTopIcon {margin-top: -20vh;display: none;}
658}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]659@media (max-height: 550px) {
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]660 #scrollIcon, #scrollTopIcon {display:none}
661 .cover.top {padding: 6vh 0 3vh 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]662 .headline {padding-top:3vh;}
663 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
664}
665@media (max-height: 480px) {
666 #scrollIcon, #scrollTopIcon {margin-top: 0}
667 .cover.top {padding: 3vh 0 3vh 0;}
668 .headline {padding-top:1.5vh;}
669 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
670}
671@media (max-height: 320px) {
672 .cover.top {padding: 1vh 0 3vh 0;}
673 .headline {padding-top:1vh;}
674 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 25vh;}
675}
676@media (max-width: 768px) {
677 .container-fluid {padding:30px 0 !important;}
678 .h1, .h2, .h3, h1, h2, h3 {
679 margin-top: 10px;
680 margin-bottom: 10px;
681 }
682 .lead, .about, .about-info, .about-tools, .about-last {font-size: 16px}
683 .row.cover.top .lead {
684 max-width: 350px;
685 margin-left:auto;
686 margin-right: auto
687 }
688 .h4, h4 {font-size: 20px}
689 #portfolio h2 {padding-bottom: 0}
690 #portfolio > .container {padding-right: 0;padding-left: 0}
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200[diff] [blame]691 .portfolio-projects--btn {margin-top:0;margin-left: 4px;margin-right: 4px}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]692 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-right: 4px}
693 #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 +0200[diff] [blame]694 #scrollIcon, #scrollTopIcon {font-size: 1em;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]695}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]696@media (max-width:480px) {.row.cover.top .lead {max-width:180px}}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]697@media (max-device-height: 480px) and (orientation: landscape) {
698 .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
699 max-height: 240px;
700 }
701 .navbar-nav>li>a {
702 padding-top: 6px;
703 padding-bottom: 6px;
704 }
705}
706@media (max-width: 360px) {
707 .h1, h1 {font-size: 32px;}
708 .cover, .cover.bottom {
709 padding-left: 15px;
710 padding-right: 15px;
711 }
712}
713
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]714h1 {
715 color: #fff;
716 cursor: default;
717}
718
719h1 span:nth-of-type(1) {
720 font-size: 1em;
721 line-height: 0.5em;
722}
723h1 span:nth-of-type(2) {
724 font-size: .4em;
725 font-weight: 400;
726 line-height: 3.65em;
727 color: #0080ff;
728 background-color: #282828;
729 padding: 3px 10px;
730 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.6);
731}
732h1 span:nth-of-type(3) {
733 font-size: 1.5em;
734 line-height: .85em;
735}
736
737.space {
738 will-change: transform;
739 position: relative;
740 left:-25;
741 top:auto;
742 bottom:auto;
743 margin-top:15%;
744 margin-bottom:25%;
745 margin-left: 35%;
Henri Koivunevabe19c192017-11-22 22:14:33 +0200[diff] [blame]746 margin-right: auto;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]747 -webkit-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]748 -moz-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
749 -o-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]750 transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
751 -webkit-transition: all 600ms;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]752 -moz-transition: all 600ms;
753 -o-transition: all 600ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]754 transition: all 600ms;
755}
756
757.space-hover {
758 position: relative;
759 left:-25;
760 top:auto;
761 bottom:auto;
762 margin-top:30%;
763 margin-bottom:25%;
764 margin-left: 45%;
Henri Koivunevabe19c192017-11-22 22:14:33 +0200[diff] [blame]765 margin-right: auto;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]766 -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]767 -moz-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
768 -o-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]769 transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
770}
771
772.phone-container {
773 width: 11.2em;
774 height: 23.33em;
775 position: absolute;
776 top: 0;
777 bottom: 0;
778 left: 0;
779 right: 0;
780 margin: auto;
781 -webkit-transform-style: preserve-3d;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]782 -moz-transform-style: preserve-3d;
783 -o-transform-style: preserve-3d;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]784 transform-style: preserve-3d;
785 -webkit-transform: translateX(-80%);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]786 -moz-transform: translateX(-80%);
787 -o-transform: translateX(-80%);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]788 transform: translateX(-80%);
789 border-radius: 2.0em;
790}
791
792.phone-front {
793 will-change: transform;
794 width: 11.2em;
795 height: 23.33em;
796 position: absolute;
797 top: 0;
798 bottom: 0;
799 left: 0;
800 right: 0;
801 margin: auto;
802 background-image: url("../images/phone_front.svg");
803 background-repeat: no-repeat;
804 background-position: -.53em 0;
805 background-size: 12.3em 23.36em;
806 border-radius: 2.0em;
807 box-shadow: -20px 27px 13px 10px rgba(0, 0, 0, 0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]808 -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
809 -moz-transition: transform 600ms, box-shadow 450ms;
810 -o-transition: transform 600ms, box-shadow 450ms;
811 transition: transform 600ms, box-shadow 450ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]812}
813
814.just-phone-front {
815 will-change: transform;
816 width: 11.2em;
817 height: 23.33em;
818 position: absolute;
819 right: 0;
820 margin: auto;
821 left:-25;
822 top:0;
823 bottom:auto;
824 margin-top:10%;
825 margin-bottom:15%;
826 margin-left: 35%;
827 margin-right: auto;
828 background-image: url("../images/phone_front.svg");
829 background-repeat: no-repeat;
830 background-position: -.53em 0;
831 background-size: 12.3em 23.36em;
832 border-radius: 2.0em;
833 box-shadow: -10px 13px 7px 5px rgba(0, 0, 0, 0.5);
834 -webkit-transform: scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]835 -moz-transform: scale(0.90);
836 -o-transform: scale(0.90);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]837 transform: scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]838 -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 +0300[diff] [blame]842}
843
844.phone-front-hover {
845 box-shadow: 0 12px 13px 10px rgba(0, 0, 0, 0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]846 -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
847 -moz-transition: transform 600ms, box-shadow 450ms;
848 -o-transition: transform 600ms, box-shadow 450ms;
849 transition: transform 600ms, box-shadow 450ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]850}
851
852.phone-screen {
853 width: 10.5em;
854 height: 19.3em;
855 position: relative;
856 left: 0;
857 right: 0;
858 top: 2.283em;
859 margin: auto;
860 background-color: #000;
861 overflow: hidden;
862}
863.phone-screen::before {
864 content: "";
865 position: absolute;
866 width: 100%;
867 height: 100%;
868 box-shadow: inset 13px 0 10px -5px rgba(250, 250, 250, 0.17), inset -13px 0 10px -5px rgba(250, 250, 250, 0.17);
869 background-image: url("../images/bliss_screens.gif");
870 background-repeat: no-repeat;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]871 background-position: 50% 0;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]872 background-size: cover;
873 -webkit-transform: scale(1);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]874 -moz-transform: scale(1);
875 -o-transform: scale(1);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]876 transform: scale(1);
877}
878.phone-screen::after {
879 content: "";
880 position: absolute;
881 width: 100%;
882 height: 100%;
883 background-color: rgba(250, 250, 250, 0.1);
884}
885
886.phone-side {
887 will-change: transform;
888 width: 13.33em;
889 height: 25em;
890 position: absolute;
891 top: 0;
892 bottom: 0;
893 left: 0;
894 right: 0;
895 margin: auto;
896 border-radius: 1.66em;
897 background-repeat: no-repeat;
898 background-position: 2.2em .5em;
899 background-size: 13.33em 24.73em;
900 -webkit-transform-style: preserve-3d;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]901 -moz-transform-style: preserve-3d;
902 -o-transform-style: preserve-3d;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]903 transform-style: preserve-3d;
904 -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 +0200[diff] [blame]905 -moz-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
906 -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 +0300[diff] [blame]907 transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
908 -webkit-transition: all 350ms;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]909 -moz-transition: all 350ms;
910 -o-transition: all 350ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]911 transition: all 350ms;
912}
913
914.phone-side-hover {
915 -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 +0200[diff] [blame]916 -moz-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
917 -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 +0300[diff] [blame]918 transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
919 -webkit-transition: all 350ms;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]920 -moz-transition: all 350ms;
921 -o-transition: all 350ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]922}
923
924@-webkit-keyframes figure-anim {
925 from {
926 border-radius: 50%;
927 -webkit-transform: rotate(0deg) scale(1);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]928 -moz-transform: rotate(0deg) scale(1);
929 -o-transform: rotate(0deg) scale(1);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]930 transform: rotate(0deg) scale(1);
931 }
932 to {
933 border-radius: 30%;
934 -webkit-transform: rotate(360deg) scale(0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]935 -moz-transform: rotate(360deg) scale(0.5);
936 -o-transform: rotate(360deg) scale(0.5);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]937 transform: rotate(360deg) scale(0.5);
938 }
939}
940
941@keyframes figure-anim {
942 from {
943 border-radius: 50%;
944 -webkit-transform: rotate(0deg) scale(1);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]945 -moz-transform: rotate(0deg) scale(1);
946 -o-transform: rotate(0deg) scale(1);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]947 transform: rotate(0deg) scale(1);
948 }
949 to {
950 border-radius: 30%;
951 -webkit-transform: rotate(360deg) scale(0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]952 -moz-transform: rotate(360deg) scale(0.5);
953 -o-transform: rotate(360deg) scale(0.5);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]954 transform: rotate(360deg) scale(0.5);
955 }
956}
957@-webkit-keyframes figure-container-anim {
958 from {
959 -webkit-transform: rotate(0deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]960 -moz-transform: rotate(0deg);
961 -o-transform: rotate(0deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]962 transform: rotate(0deg);
963 }
964 to {
965 -webkit-transform: rotate(360deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]966 -moz-transform: rotate(360deg);
967 -o-transform: rotate(360deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]968 transform: rotate(360deg);
969 }
970}
971@keyframes figure-container-anim {
972 from {
973 -webkit-transform: rotate(0deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]974 -moz-transform: rotate(0deg);
975 -o-transform: rotate(0deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]976 transform: rotate(0deg);
977 }
978 to {
979 -webkit-transform: rotate(360deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]980 -moz-transform: rotate(360deg);
981 -o-transform: rotate(360deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]982 transform: rotate(360deg);
983 }
984}
985
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]986@media (min-width: 1200px) {
987 .pull-right-lg {
988 float: right !important; }
989 .pull-left-lg {
990 float: left !important; }
Henri Koivuneva9c1e2432017-11-22 22:01:33 +0200[diff] [blame]991 .pull-left-md {
992 float: left !important; }
993 .container {max-width: 1170px;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]994 .portfolio-projects .col-lg-6 {width: 100%}
995 .navbar > .container {max-width: 1170px}
996}
997@media (min-width: 1366px) {
998 #portfolio > .container, #about > .row {width: 90%;max-width: 1600px;margin-left:auto;margin-right: auto;}
999 .navbar > .container {max-width: 1170px}
1000}
Unknowne3cf16e2017-11-04 16:32:52 -0400[diff] [blame]1001
1002 /* The alert message box */
1003.alert {
1004 padding: 20px;
1005 background-color: #f44336; /* Red */
1006 color: white;
1007 margin-bottom: 15px;
1008}
Henri Koivunevac2503532017-11-23 04:00:26 +0200[diff] [blame]1009.alert a {color: #fff;font-weight:bolder;padding-bottom:2px;margin-bottom:-2px;box-shadow: 0 2px}
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200[diff] [blame]1010@media (max-width:768px) {.alert {width:90%;margin: 0 auto;}}
Henri Koivunevac2503532017-11-23 04:00:26 +0200[diff] [blame]1011@media (max-width:1200px) {.alert {margin-top:3rem}}
Unknowne3cf16e2017-11-04 16:32:52 -0400[diff] [blame]1012/* The close button */
1013.closebtn {
1014 margin-left: 15px;
1015 color: white;
1016 font-weight: bold;
1017 float: right;
1018 font-size: 22px;
1019 line-height: 20px;
1020 cursor: pointer;
1021 transition: 0.3s;
1022}
1023
Unknownb60d9422017-11-27 19:40:08 -0500[diff] [blame]1024/* The alert message box */
1025.alert2 {
1026 padding: 20px;
1027 background-color: #17c13f; /* green */
1028 color: white;
1029 margin-bottom: 15px;
1030}
1031.alert2 a {color: #fff;font-weight:bolder;padding-bottom:2px;margin-bottom:-2px;box-shadow: 0 2px}
1032@media (max-width:768px) {.alert {width:90%;margin: 0 auto;}}
1033@media (max-width:1200px) {.alert {margin-top:3rem}}
1034/* The close button */
1035.closebtn {
1036 margin-left: 15px;
1037 color: white;
1038 font-weight: bold;
1039 float: right;
1040 font-size: 22px;
1041 line-height: 20px;
1042 cursor: pointer;
1043 transition: 0.3s;
1044}
1045
Unknowne3cf16e2017-11-04 16:32:52 -0400[diff] [blame]1046/* When moving the mouse over the close button */
1047.closebtn:hover {
1048 color: black;
Unknownb60d9422017-11-27 19:40:08 -0500[diff] [blame]1049}
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1050
1051.vcenter {
1052 display: inline-block;
1053 position: absolute;
1054 left: 50%;
1055 top: 50%;
1056 -webkit-transform: translate(-50%, -50%);
1057 transform: translate(-50%, -50%);
Unknownb60d9422017-11-27 19:40:08 -0500[diff] [blame]1058}
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1059
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1060/* Anim
Unknownb60d9422017-11-27 19:40:08 -0500[diff] [blame]1061width: 378px;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1062 height: 290px;
1063 */
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1064.animation {
1065 display: inline-block;
1066 position: relative;
Unknownb60d9422017-11-27 19:40:08 -0500[diff] [blame]1067 width: 64rem;
1068 height: 42rem;
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1069 margin: -2vh auto 0 auto;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1070 vertical-align: middle;
1071}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1072@media (max-width:720px) {
1073 .animation {margin-left:-30rem;margin-right:-30rem;}
1074}
1075@media (max-width:450px) {
1076 .animation {width:58rem;height:38rem;}
1077}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1078@media (max-width:450px) {
1079 .animation {width:58rem;height:38rem;}
1080}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1081@media (max-width:400px) {
1082 .animation {width:55rem;height:36rem;}
1083}
1084@media (max-width:380px) {
1085 .animation {width:50rem;height:33rem;}
1086}
1087@media (max-width:340px) {
1088 .animation {width:47rem;height:31rem;}
1089}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1090@media (max-width:320px) {
1091 .animation {width:42rem;height:28rem;}
1092}
1093@media (max-height:650px) {
Henri Koivuneva39d1e2f2017-11-23 04:30:54 +0200[diff] [blame]1094 .animation {margin-top: -7vh !important;margin-bottom: 10vh !important;}
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200[diff] [blame]1095}
1096@media (min-height:651px) {
1097 .animation {margin-top: -8vh !important;margin-bottom: 10vh !important;}
1098}
1099@media (min-height:670px) {
1100 .animation {margin-top: -6.5vh !important;margin-bottom: 10vh !important;}
1101}
1102@media (min-height:720px) {
Henri Koivunevaf259ace2017-11-23 04:28:03 +0200[diff] [blame]1103 .animation {margin-top: -2vh !important;margin-bottom: 10vh !important;overflow-y:visible}
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200[diff] [blame]1104}
1105@media (min-height:800px) {
1106 .animation {margin-top: 0 !important;margin-bottom: 10vh !important;overflow-y:visible}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1107}
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1108.animation .device {
1109 position: absolute;
1110 width: 100%;
1111 height: 100%;
1112 left: 50%;
1113 top: 50%;
1114 background: #111;
1115 -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1116 -moz-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1117 -ms-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1118 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1119 -moz-transform: translate(-50%, -50%);
1120 -ms-transform: translate(-50%, -50%);
1121 -webkit-transform: translate(-50%, -50%);
1122 transform: translate(-50%, -50%);
1123}
1124.animation .device .phone-home-button,
1125.animation .device .tablet-home-button {
1126 position: absolute;
1127 border-radius: 50%;
1128 background: #444;
1129 opacity: 0;
1130 z-index: 1;
1131 -webkit-transition: all 0.4s ease;
1132 -moz-transition: all 0.4s ease;
1133 -ms-transition: all 0.4s ease;
1134 transition: all 0.4s ease;
1135}
1136.animation .device .phone-home-button {
1137 width: 16px;
1138 height: 16px;
1139 margin-top: -8px;
1140 right: 11px;
1141 top: 50%;
1142}
1143.animation .device .tablet-home-button {
1144 width: 12px;
1145 height: 12px;
1146 margin-left: -6px;
1147 bottom: 7px;
1148 left: 50%;
1149}
1150.animation .device .screen-stand {
1151 position: absolute;
1152 width: 100%;
1153 margin-left: -10px;
1154 margin-top: -1px;
1155 top: 60%;
1156 opacity: 0;
1157 z-index: 1;
1158 -webkit-transition: all 0.4s ease-out;
1159 -moz-transition: all 0.4s ease-out;
1160 -ms-transition: all 0.4s ease-out;
1161 transition: all 0.4s ease-out;
1162}
1163.animation .device .screen-stand .leg {
1164 position: absolute;
1165 width: 12px;
1166 height: 16px;
1167 left: 50%;
1168 top: 0;
1169 margin-left: -6px;
1170 background: #111;
1171}
1172.animation .device .screen-stand .foot {
1173 position: absolute;
1174 width: 120px;
1175 height: 4px;
1176 left: 50%;
1177 top: 15px;
1178 margin-left: -60px;
1179 border-top-left-radius: 2px;
1180 border-top-right-radius: 2px;
1181 background: #111;
1182}
1183.animation .device .display {
1184 position: relative;
1185 width: 100%;
1186 height: 100%;
1187 overflow: hidden;
1188 background: #34495e;
1189 z-index: 3;
1190}
1191.animation .device .display div {
1192 position: absolute;
1193 width: 100%;
1194 height: 100%;
1195 left: 100%;
1196 white-space: nowrap;
1197 -webkit-transition: all 0.4s ease;
1198 -moz-transition: all 0.4s ease;
1199 -ms-transition: all 0.4s ease;
1200 transition: all 0.4s ease;
1201}
1202.animation .device .display div div {
1203 position: absolute;
1204 width: 100%;
1205 left: 0;
1206 top: 50%;
1207 margin-top: -14px;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1208 font-size: 20px;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1209 text-align: center;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1210 /* color: #0080ff;*/
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1211}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1212@media (max-width:450px) {
1213 .animation .device .display div div {width:100%;max-width:100%;font-size:12px !important;}
1214}
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1215 .animation .device .display .slide1 div {margin-top:0px;}
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1216.animation .device .display div div em {
1217 font-weight: bold;
1218}
1219.animation .device .display .slide1 {
Unknownd5655a22018-02-25 12:18:43 -0500[diff] [blame]1220 /* background: #000; */
1221 background: url("https://i.imgur.com/wCp0xpe.jpg");
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1222 background-size: cover;
1223 background-repeat: no-repeat;
1224 background-position: center center;
1225 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,
1226 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,
1227 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,
1228 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;
1229 color:white;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1230}
1231.animation .device .display .slide2 {
Unknownd5655a22018-02-25 12:18:43 -0500[diff] [blame]1232 /* background: #000; */
1233 background: url("https://i.imgur.com/KfArkPZ.jpg");
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1234 background-size: cover;
1235 background-repeat: no-repeat;
1236 background-position: center center;
1237 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,
1238 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,
1239 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,
1240 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;
1241 color:#0080ff;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1242}
1243.animation .device .display .slide3 {
Unknownd5655a22018-02-25 12:18:43 -0500[diff] [blame]1244 /* background: #000; */
1245 background: url("https://i.imgur.com/c55mey7.jpg");
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1246 background-size: cover;
1247 background-repeat: no-repeat;
1248 background-position: center center;
1249 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,
1250 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,
1251 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,
1252 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;
1253 color:white;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1254}
1255.animation[data-animation-step="1"] .device {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1256 width: 87%;
1257 height: 90%;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1258 padding: 10px;
1259 border-radius: 4px;
1260}
1261.animation[data-animation-step="1"] .device .slide1 {
1262 left: 0%;
1263}
1264.animation[data-animation-step="1"] .device .screen-stand {
1265 opacity: 1;
1266 top: 100%;
1267}
1268.animation[data-animation-step="2"] .device {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1269 width: 74%;
1270 height: 75%;
1271 padding: 16px;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1272 border-radius: 10px;
1273}
1274.animation[data-animation-step="2"] .device .slide1 {
1275 left: -100%;
1276}
1277.animation[data-animation-step="2"] .device .slide2 {
1278 left: 0%;
1279}
1280.animation[data-animation-step="2"] .device .tablet-home-button {
1281 opacity: 1;
1282}
1283.animation[data-animation-step="3"] .device {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1284 width: 27%;
1285 height: 75%;
Henri Koivuneva1cdd2cd2017-11-23 02:12:44 +0200[diff] [blame]1286 padding: 16px 4px;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1287 border-radius: 6px;
1288}
1289.animation[data-animation-step="3"] .device .slide1,
1290.animation[data-animation-step="3"] .device .slide2 {
1291 left: -100%;
1292}
1293.animation[data-animation-step="3"] .device .slide3 {
1294 left: 0%;
1295}
1296.animation[data-animation-step="3"] .device .phone-home-button {
1297 opacity: 1;
1298}
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200[diff] [blame]1299 @media (min-height:800px) {
1300 .animation[data-animation-step="1"] .device {width:87%; height:90%;}
1301 .animation[data-animation-step="2"] .device {width:80%; height:80%;}
1302 .animation[data-animation-step="3"] .device {width:28%; height:80%;}
1303 }
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1304 @media (max-height:720px) {
1305 .animation[data-animation-step="1"] .device {width:72%; height:75%;}
1306 .animation[data-animation-step="2"] .device {width:59%; height:60%;}
Henri Koivuneva9f8af432017-11-23 05:00:30 +0200[diff] [blame]1307 .animation[data-animation-step="3"] .device {width:22%; height:63%;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1308 .animation .device .display div div {font-size:16px;}
1309 }
1310 @media (max-height:650px) {
1311 .animation[data-animation-step="1"] .device {width:62%; height:65%;}
1312 .animation[data-animation-step="2"] .device {width:54%; height:55%;}
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]1313 .animation[data-animation-step="3"] .device {width:22%; height:63%;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1314 .animation .device .display div div {font-size:15px;}
1315 }
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1316 @media (max-width:560px) {
Henri Koivunevabd03c012017-11-23 02:20:26 +0200[diff] [blame]1317 .animation[data-animation-step="1"] .device {margin-top:1%;width:72%; height:75%;}
1318 .animation[data-animation-step="2"] .device {margin-top:1%;width:65%; height:66%;}
1319 .animation[data-animation-step="3"] .device {margin-top:1%;width:28%; height:80%;}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1320 .animation .device .display div div {font-size:15px;}
1321 }
1322 @media (max-width:520px) {
1323 .animation[data-animation-step="1"] .device {margin-top:0%;width:66%; height:69%;}
1324 .animation[data-animation-step="2"] .device {margin-top:0%;width:62%; height:63%;}
Henri Koivunevabd03c012017-11-23 02:20:26 +0200[diff] [blame]1325 .animation[data-animation-step="3"] .device {margin-top:0%;width:28%; height:80%;}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1326 .animation .device .display div div {font-size:15px;}
1327 }
1328 @media (max-width:460px) {
1329 .animation[data-animation-step="1"] .device {margin-top:0%;width:58%; height:61%;}
1330 .animation[data-animation-step="2"] .device {margin-top:0%;width:54%; height:55%;}
Henri Koivuneva0e02df62017-11-23 04:33:04 +0200[diff] [blame]1331 .animation[data-animation-step="3"] .device {margin-top:0%;width:25%; height:72%;}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1332 .animation .device .display div div {font-size:15px;}
1333 }
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1334 @media (max-width:350px) {
1335 .animation[data-animation-step="1"] .device {margin-top:3%;width:62%; height:65%;}
1336 .animation[data-animation-step="2"] .device {margin-top:3%;width:58%; height:60%;}
1337 .animation[data-animation-step="3"] .device {margin-top:9%;width:30%; height:80%;}
1338 .animation .device .display div div {font-size:15px;}
1339 }
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1340 @media (max-width:320px) {
1341 .animation[data-animation-step="1"] .device {margin-top:6%;width:62%; height:65%;}
1342 .animation[data-animation-step="2"] .device {margin-top:6%;width:58%; height:60%;}
1343 .animation[data-animation-step="3"] .device {margin-top:12%;width:30%; height:80%;}
1344 .animation .device .display div div {font-size:15px;}
1345 }
Henri Koivuneva9c1e2432017-11-22 22:01:33 +0200[diff] [blame]1346
1347/* More media queries */
1348@media (max-width: 430px) {
1349 h2, .h2 {font-size: 30px;}
Unknownb60d9422017-11-27 19:40:08 -0500[diff] [blame]1350}