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