Gitiles
Code Review Sign In
review.blissroms.org / blissroms.github.io / 6fa5725d1547ca42f8d323c1c2dd73c63bee0aca / . / css / style.css
blob: ba750dc11a32852a3423d90b339eac35a28848f7 [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) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]622 #scrollIcon, #scrollTopIcon {margin-top: -2vh;}
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 Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]626 #scrollIcon, #scrollTopIcon {margin-top: -8vh;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]627}
628@media (max-height: 720px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]629 #scrollIcon, #scrollTopIcon {margin-top: -8vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]630}
631@media (max-height: 690px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]632 #scrollIcon, #scrollTopIcon {margin-top: -10vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]633 .animation {margin-top:-6vh !important;}
634}
635@media (max-height: 670px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]636 #scrollIcon, #scrollTopIcon {margin-top: -14vh;}
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) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]646 #scrollIcon, #scrollTopIcon {margin-top: -19vh;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]647 .animation {margin-top:-10vh !important;}
648 .cover.top {padding: 6vh 0 5vh 0;}
649}
650@media (max-height: 600px) {
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]651 #scrollIcon, #scrollTopIcon {margin-top: -20vh;}
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 Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]655@media (max-height: 600px) and (orientation:landscape) {
656 #scrollIcon, #scrollTopIcon {margin-top: -20vh;display: none;}
657}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]658@media (max-height: 550px) {
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]659 #scrollIcon, #scrollTopIcon {display:none}
660 .cover.top {padding: 6vh 0 3vh 0;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]661 .headline {padding-top:3vh;}
662 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
663}
664@media (max-height: 480px) {
665 #scrollIcon, #scrollTopIcon {margin-top: 0}
666 .cover.top {padding: 3vh 0 3vh 0;}
667 .headline {padding-top:1.5vh;}
668 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
669}
670@media (max-height: 320px) {
671 .cover.top {padding: 1vh 0 3vh 0;}
672 .headline {padding-top:1vh;}
673 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 25vh;}
674}
675@media (max-width: 768px) {
676 .container-fluid {padding:30px 0 !important;}
677 .h1, .h2, .h3, h1, h2, h3 {
678 margin-top: 10px;
679 margin-bottom: 10px;
680 }
681 .lead, .about, .about-info, .about-tools, .about-last {font-size: 16px}
682 .row.cover.top .lead {
683 max-width: 350px;
684 margin-left:auto;
685 margin-right: auto
686 }
687 .h4, h4 {font-size: 20px}
688 #portfolio h2 {padding-bottom: 0}
689 #portfolio > .container {padding-right: 0;padding-left: 0}
Henri Koivunevaaf9a0dc2017-11-23 04:10:52 +0200[diff] [blame]690 .portfolio-projects--btn {margin-top:0;margin-left: 4px;margin-right: 4px}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]691 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-right: 4px}
692 #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]693 #scrollIcon, #scrollTopIcon {font-size: 1em;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]694}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]695@media (max-width:480px) {.row.cover.top .lead {max-width:180px}}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]696@media (max-device-height: 480px) and (orientation: landscape) {
697 .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
698 max-height: 240px;
699 }
700 .navbar-nav>li>a {
701 padding-top: 6px;
702 padding-bottom: 6px;
703 }
704}
705@media (max-width: 360px) {
706 .h1, h1 {font-size: 32px;}
707 .cover, .cover.bottom {
708 padding-left: 15px;
709 padding-right: 15px;
710 }
711}
712
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]713h1 {
714 color: #fff;
715 cursor: default;
716}
717
718h1 span:nth-of-type(1) {
719 font-size: 1em;
720 line-height: 0.5em;
721}
722h1 span:nth-of-type(2) {
723 font-size: .4em;
724 font-weight: 400;
725 line-height: 3.65em;
726 color: #0080ff;
727 background-color: #282828;
728 padding: 3px 10px;
729 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.6);
730}
731h1 span:nth-of-type(3) {
732 font-size: 1.5em;
733 line-height: .85em;
734}
735
736.space {
737 will-change: transform;
738 position: relative;
739 left:-25;
740 top:auto;
741 bottom:auto;
742 margin-top:15%;
743 margin-bottom:25%;
744 margin-left: 35%;
Henri Koivunevabe19c192017-11-22 22:14:33 +0200[diff] [blame]745 margin-right: auto;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]746 -webkit-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]747 -moz-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
748 -o-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]749 transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
750 -webkit-transition: all 600ms;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]751 -moz-transition: all 600ms;
752 -o-transition: all 600ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]753 transition: all 600ms;
754}
755
756.space-hover {
757 position: relative;
758 left:-25;
759 top:auto;
760 bottom:auto;
761 margin-top:30%;
762 margin-bottom:25%;
763 margin-left: 45%;
Henri Koivunevabe19c192017-11-22 22:14:33 +0200[diff] [blame]764 margin-right: auto;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]765 -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]766 -moz-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
767 -o-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]768 transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
769}
770
771.phone-container {
772 width: 11.2em;
773 height: 23.33em;
774 position: absolute;
775 top: 0;
776 bottom: 0;
777 left: 0;
778 right: 0;
779 margin: auto;
780 -webkit-transform-style: preserve-3d;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]781 -moz-transform-style: preserve-3d;
782 -o-transform-style: preserve-3d;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]783 transform-style: preserve-3d;
784 -webkit-transform: translateX(-80%);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]785 -moz-transform: translateX(-80%);
786 -o-transform: translateX(-80%);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]787 transform: translateX(-80%);
788 border-radius: 2.0em;
789}
790
791.phone-front {
792 will-change: transform;
793 width: 11.2em;
794 height: 23.33em;
795 position: absolute;
796 top: 0;
797 bottom: 0;
798 left: 0;
799 right: 0;
800 margin: auto;
801 background-image: url("../images/phone_front.svg");
802 background-repeat: no-repeat;
803 background-position: -.53em 0;
804 background-size: 12.3em 23.36em;
805 border-radius: 2.0em;
806 box-shadow: -20px 27px 13px 10px rgba(0, 0, 0, 0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]807 -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
808 -moz-transition: transform 600ms, box-shadow 450ms;
809 -o-transition: transform 600ms, box-shadow 450ms;
810 transition: transform 600ms, box-shadow 450ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]811}
812
813.just-phone-front {
814 will-change: transform;
815 width: 11.2em;
816 height: 23.33em;
817 position: absolute;
818 right: 0;
819 margin: auto;
820 left:-25;
821 top:0;
822 bottom:auto;
823 margin-top:10%;
824 margin-bottom:15%;
825 margin-left: 35%;
826 margin-right: auto;
827 background-image: url("../images/phone_front.svg");
828 background-repeat: no-repeat;
829 background-position: -.53em 0;
830 background-size: 12.3em 23.36em;
831 border-radius: 2.0em;
832 box-shadow: -10px 13px 7px 5px rgba(0, 0, 0, 0.5);
833 -webkit-transform: scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]834 -moz-transform: scale(0.90);
835 -o-transform: scale(0.90);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]836 transform: scale(0.90);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]837 -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
838 -moz-transition: transform 600ms, box-shadow 450ms;
839 -o-transition: transform 600ms, box-shadow 450ms;
840 transition: transform 600ms, box-shadow 450ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]841}
842
843.phone-front-hover {
844 box-shadow: 0 12px 13px 10px rgba(0, 0, 0, 0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]845 -webkit-transition: -webkit-transform 600ms, box-shadow 450ms;
846 -moz-transition: transform 600ms, box-shadow 450ms;
847 -o-transition: transform 600ms, box-shadow 450ms;
848 transition: transform 600ms, box-shadow 450ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]849}
850
851.phone-screen {
852 width: 10.5em;
853 height: 19.3em;
854 position: relative;
855 left: 0;
856 right: 0;
857 top: 2.283em;
858 margin: auto;
859 background-color: #000;
860 overflow: hidden;
861}
862.phone-screen::before {
863 content: "";
864 position: absolute;
865 width: 100%;
866 height: 100%;
867 box-shadow: inset 13px 0 10px -5px rgba(250, 250, 250, 0.17), inset -13px 0 10px -5px rgba(250, 250, 250, 0.17);
868 background-image: url("../images/bliss_screens.gif");
869 background-repeat: no-repeat;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]870 background-position: 50% 0;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]871 background-size: cover;
872 -webkit-transform: scale(1);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]873 -moz-transform: scale(1);
874 -o-transform: scale(1);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]875 transform: scale(1);
876}
877.phone-screen::after {
878 content: "";
879 position: absolute;
880 width: 100%;
881 height: 100%;
882 background-color: rgba(250, 250, 250, 0.1);
883}
884
885.phone-side {
886 will-change: transform;
887 width: 13.33em;
888 height: 25em;
889 position: absolute;
890 top: 0;
891 bottom: 0;
892 left: 0;
893 right: 0;
894 margin: auto;
895 border-radius: 1.66em;
896 background-repeat: no-repeat;
897 background-position: 2.2em .5em;
898 background-size: 13.33em 24.73em;
899 -webkit-transform-style: preserve-3d;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]900 -moz-transform-style: preserve-3d;
901 -o-transform-style: preserve-3d;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]902 transform-style: preserve-3d;
903 -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]904 -moz-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
905 -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]906 transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
907 -webkit-transition: all 350ms;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]908 -moz-transition: all 350ms;
909 -o-transition: all 350ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]910 transition: all 350ms;
911}
912
913.phone-side-hover {
914 -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]915 -moz-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
916 -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]917 transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
918 -webkit-transition: all 350ms;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]919 -moz-transition: all 350ms;
920 -o-transition: all 350ms;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]921}
922
923@-webkit-keyframes figure-anim {
924 from {
925 border-radius: 50%;
926 -webkit-transform: rotate(0deg) scale(1);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]927 -moz-transform: rotate(0deg) scale(1);
928 -o-transform: rotate(0deg) scale(1);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]929 transform: rotate(0deg) scale(1);
930 }
931 to {
932 border-radius: 30%;
933 -webkit-transform: rotate(360deg) scale(0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]934 -moz-transform: rotate(360deg) scale(0.5);
935 -o-transform: rotate(360deg) scale(0.5);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]936 transform: rotate(360deg) scale(0.5);
937 }
938}
939
940@keyframes figure-anim {
941 from {
942 border-radius: 50%;
943 -webkit-transform: rotate(0deg) scale(1);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]944 -moz-transform: rotate(0deg) scale(1);
945 -o-transform: rotate(0deg) scale(1);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]946 transform: rotate(0deg) scale(1);
947 }
948 to {
949 border-radius: 30%;
950 -webkit-transform: rotate(360deg) scale(0.5);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]951 -moz-transform: rotate(360deg) scale(0.5);
952 -o-transform: rotate(360deg) scale(0.5);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]953 transform: rotate(360deg) scale(0.5);
954 }
955}
956@-webkit-keyframes figure-container-anim {
957 from {
958 -webkit-transform: rotate(0deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]959 -moz-transform: rotate(0deg);
960 -o-transform: rotate(0deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]961 transform: rotate(0deg);
962 }
963 to {
964 -webkit-transform: rotate(360deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]965 -moz-transform: rotate(360deg);
966 -o-transform: rotate(360deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]967 transform: rotate(360deg);
968 }
969}
970@keyframes figure-container-anim {
971 from {
972 -webkit-transform: rotate(0deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]973 -moz-transform: rotate(0deg);
974 -o-transform: rotate(0deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]975 transform: rotate(0deg);
976 }
977 to {
978 -webkit-transform: rotate(360deg);
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]979 -moz-transform: rotate(360deg);
980 -o-transform: rotate(360deg);
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]981 transform: rotate(360deg);
982 }
983}
984
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]985@media (min-width: 1200px) {
986 .pull-right-lg {
987 float: right !important; }
988 .pull-left-lg {
989 float: left !important; }
Henri Koivuneva9c1e2432017-11-22 22:01:33 +0200[diff] [blame]990 .pull-left-md {
991 float: left !important; }
992 .container {max-width: 1170px;}
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]993 .portfolio-projects .col-lg-6 {width: 100%}
994 .navbar > .container {max-width: 1170px}
995}
996@media (min-width: 1366px) {
997 #portfolio > .container, #about > .row {width: 90%;max-width: 1600px;margin-left:auto;margin-right: auto;}
998 .navbar > .container {max-width: 1170px}
999}
Unknowne3cf16e2017-11-04 16:32:52 -0400[diff] [blame]1000
1001 /* The alert message box */
1002.alert {
1003 padding: 20px;
1004 background-color: #f44336; /* Red */
1005 color: white;
1006 margin-bottom: 15px;
1007}
Henri Koivunevac2503532017-11-23 04:00:26 +0200[diff] [blame]1008.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]1009@media (max-width:768px) {.alert {width:90%;margin: 0 auto;}}
Henri Koivunevac2503532017-11-23 04:00:26 +0200[diff] [blame]1010@media (max-width:1200px) {.alert {margin-top:3rem}}
Unknowne3cf16e2017-11-04 16:32:52 -0400[diff] [blame]1011/* The close button */
1012.closebtn {
1013 margin-left: 15px;
1014 color: white;
1015 font-weight: bold;
1016 float: right;
1017 font-size: 22px;
1018 line-height: 20px;
1019 cursor: pointer;
1020 transition: 0.3s;
1021}
1022
1023/* When moving the mouse over the close button */
1024.closebtn:hover {
1025 color: black;
Unknown7e529f82017-11-04 16:44:32 -0400[diff] [blame]1026}
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1027
1028.vcenter {
1029 display: inline-block;
1030 position: absolute;
1031 left: 50%;
1032 top: 50%;
1033 -webkit-transform: translate(-50%, -50%);
1034 transform: translate(-50%, -50%);
1035}
1036
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1037/* Anim
1038width: 378px;
1039 height: 290px;
1040 */
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1041.animation {
1042 display: inline-block;
1043 position: relative;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1044 width: 64rem;
1045 height: 42rem;
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1046 margin: -2vh auto 0 auto;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1047 vertical-align: middle;
1048}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1049@media (max-width:720px) {
1050 .animation {margin-left:-30rem;margin-right:-30rem;}
1051}
1052@media (max-width:450px) {
1053 .animation {width:58rem;height:38rem;}
1054}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1055@media (max-width:450px) {
1056 .animation {width:58rem;height:38rem;}
1057}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1058@media (max-width:400px) {
1059 .animation {width:55rem;height:36rem;}
1060}
1061@media (max-width:380px) {
1062 .animation {width:50rem;height:33rem;}
1063}
1064@media (max-width:340px) {
1065 .animation {width:47rem;height:31rem;}
1066}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1067@media (max-width:320px) {
1068 .animation {width:42rem;height:28rem;}
1069}
1070@media (max-height:650px) {
Henri Koivuneva39d1e2f2017-11-23 04:30:54 +0200[diff] [blame]1071 .animation {margin-top: -7vh !important;margin-bottom: 10vh !important;}
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200[diff] [blame]1072}
1073@media (min-height:651px) {
1074 .animation {margin-top: -8vh !important;margin-bottom: 10vh !important;}
1075}
1076@media (min-height:670px) {
1077 .animation {margin-top: -6.5vh !important;margin-bottom: 10vh !important;}
1078}
1079@media (min-height:720px) {
Henri Koivunevaf259ace2017-11-23 04:28:03 +0200[diff] [blame]1080 .animation {margin-top: -2vh !important;margin-bottom: 10vh !important;overflow-y:visible}
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200[diff] [blame]1081}
1082@media (min-height:800px) {
1083 .animation {margin-top: 0 !important;margin-bottom: 10vh !important;overflow-y:visible}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1084}
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1085.animation .device {
1086 position: absolute;
1087 width: 100%;
1088 height: 100%;
1089 left: 50%;
1090 top: 50%;
1091 background: #111;
1092 -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1093 -moz-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1094 -ms-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1095 transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
1096 -moz-transform: translate(-50%, -50%);
1097 -ms-transform: translate(-50%, -50%);
1098 -webkit-transform: translate(-50%, -50%);
1099 transform: translate(-50%, -50%);
1100}
1101.animation .device .phone-home-button,
1102.animation .device .tablet-home-button {
1103 position: absolute;
1104 border-radius: 50%;
1105 background: #444;
1106 opacity: 0;
1107 z-index: 1;
1108 -webkit-transition: all 0.4s ease;
1109 -moz-transition: all 0.4s ease;
1110 -ms-transition: all 0.4s ease;
1111 transition: all 0.4s ease;
1112}
1113.animation .device .phone-home-button {
1114 width: 16px;
1115 height: 16px;
1116 margin-top: -8px;
1117 right: 11px;
1118 top: 50%;
1119}
1120.animation .device .tablet-home-button {
1121 width: 12px;
1122 height: 12px;
1123 margin-left: -6px;
1124 bottom: 7px;
1125 left: 50%;
1126}
1127.animation .device .screen-stand {
1128 position: absolute;
1129 width: 100%;
1130 margin-left: -10px;
1131 margin-top: -1px;
1132 top: 60%;
1133 opacity: 0;
1134 z-index: 1;
1135 -webkit-transition: all 0.4s ease-out;
1136 -moz-transition: all 0.4s ease-out;
1137 -ms-transition: all 0.4s ease-out;
1138 transition: all 0.4s ease-out;
1139}
1140.animation .device .screen-stand .leg {
1141 position: absolute;
1142 width: 12px;
1143 height: 16px;
1144 left: 50%;
1145 top: 0;
1146 margin-left: -6px;
1147 background: #111;
1148}
1149.animation .device .screen-stand .foot {
1150 position: absolute;
1151 width: 120px;
1152 height: 4px;
1153 left: 50%;
1154 top: 15px;
1155 margin-left: -60px;
1156 border-top-left-radius: 2px;
1157 border-top-right-radius: 2px;
1158 background: #111;
1159}
1160.animation .device .display {
1161 position: relative;
1162 width: 100%;
1163 height: 100%;
1164 overflow: hidden;
1165 background: #34495e;
1166 z-index: 3;
1167}
1168.animation .device .display div {
1169 position: absolute;
1170 width: 100%;
1171 height: 100%;
1172 left: 100%;
1173 white-space: nowrap;
1174 -webkit-transition: all 0.4s ease;
1175 -moz-transition: all 0.4s ease;
1176 -ms-transition: all 0.4s ease;
1177 transition: all 0.4s ease;
1178}
1179.animation .device .display div div {
1180 position: absolute;
1181 width: 100%;
1182 left: 0;
1183 top: 50%;
1184 margin-top: -14px;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1185 font-size: 20px;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1186 text-align: center;
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1187 /* color: #0080ff;*/
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1188}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1189@media (max-width:450px) {
1190 .animation .device .display div div {width:100%;max-width:100%;font-size:12px !important;}
1191}
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1192 .animation .device .display .slide1 div {margin-top:0px;}
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1193.animation .device .display div div em {
1194 font-weight: bold;
1195}
1196.animation .device .display .slide1 {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1197 background: #000;
1198 background: url("../images/bliss-desktop.jpg");
1199 background-size: cover;
1200 background-repeat: no-repeat;
1201 background-position: center center;
1202 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,
1203 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,
1204 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,
1205 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;
1206 color:white;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1207}
1208.animation .device .display .slide2 {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1209 background: #000;
1210 background: url("../images/bliss-tablet.jpg");
1211 background-size: cover;
1212 background-repeat: no-repeat;
1213 background-position: center center;
1214 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,
1215 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,
1216 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,
1217 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;
1218 color:#0080ff;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1219}
1220.animation .device .display .slide3 {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1221 background: #000;
1222 background: url("../images/bliss-phone.jpg");
1223 background-size: cover;
1224 background-repeat: no-repeat;
1225 background-position: center center;
1226 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,
1227 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,
1228 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,
1229 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;
1230 color:white;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1231}
1232.animation[data-animation-step="1"] .device {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1233 width: 87%;
1234 height: 90%;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1235 padding: 10px;
1236 border-radius: 4px;
1237}
1238.animation[data-animation-step="1"] .device .slide1 {
1239 left: 0%;
1240}
1241.animation[data-animation-step="1"] .device .screen-stand {
1242 opacity: 1;
1243 top: 100%;
1244}
1245.animation[data-animation-step="2"] .device {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1246 width: 74%;
1247 height: 75%;
1248 padding: 16px;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1249 border-radius: 10px;
1250}
1251.animation[data-animation-step="2"] .device .slide1 {
1252 left: -100%;
1253}
1254.animation[data-animation-step="2"] .device .slide2 {
1255 left: 0%;
1256}
1257.animation[data-animation-step="2"] .device .tablet-home-button {
1258 opacity: 1;
1259}
1260.animation[data-animation-step="3"] .device {
Henri Koivuneva60a08562017-11-23 00:43:58 +0200[diff] [blame]1261 width: 27%;
1262 height: 75%;
Henri Koivuneva1cdd2cd2017-11-23 02:12:44 +0200[diff] [blame]1263 padding: 16px 4px;
Unknown55030612017-11-04 20:28:12 -0400[diff] [blame]1264 border-radius: 6px;
1265}
1266.animation[data-animation-step="3"] .device .slide1,
1267.animation[data-animation-step="3"] .device .slide2 {
1268 left: -100%;
1269}
1270.animation[data-animation-step="3"] .device .slide3 {
1271 left: 0%;
1272}
1273.animation[data-animation-step="3"] .device .phone-home-button {
1274 opacity: 1;
1275}
Henri Koivuneva6f33f842017-11-23 03:27:31 +0200[diff] [blame]1276 @media (min-height:800px) {
1277 .animation[data-animation-step="1"] .device {width:87%; height:90%;}
1278 .animation[data-animation-step="2"] .device {width:80%; height:80%;}
1279 .animation[data-animation-step="3"] .device {width:28%; height:80%;}
1280 }
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1281 @media (max-height:720px) {
1282 .animation[data-animation-step="1"] .device {width:72%; height:75%;}
1283 .animation[data-animation-step="2"] .device {width:59%; height:60%;}
Henri Koivuneva9f8af432017-11-23 05:00:30 +0200[diff] [blame]1284 .animation[data-animation-step="3"] .device {width:22%; height:63%;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1285 .animation .device .display div div {font-size:16px;}
1286 }
1287 @media (max-height:650px) {
1288 .animation[data-animation-step="1"] .device {width:62%; height:65%;}
1289 .animation[data-animation-step="2"] .device {width:54%; height:55%;}
Henri Koivunevad27df022017-11-23 05:12:58 +0200[diff] [blame]1290 .animation[data-animation-step="3"] .device {width:22%; height:63%;}
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1291 .animation .device .display div div {font-size:15px;}
1292 }
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1293 @media (max-width:560px) {
Henri Koivunevabd03c012017-11-23 02:20:26 +0200[diff] [blame]1294 .animation[data-animation-step="1"] .device {margin-top:1%;width:72%; height:75%;}
1295 .animation[data-animation-step="2"] .device {margin-top:1%;width:65%; height:66%;}
1296 .animation[data-animation-step="3"] .device {margin-top:1%;width:28%; height:80%;}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1297 .animation .device .display div div {font-size:15px;}
1298 }
1299 @media (max-width:520px) {
1300 .animation[data-animation-step="1"] .device {margin-top:0%;width:66%; height:69%;}
1301 .animation[data-animation-step="2"] .device {margin-top:0%;width:62%; height:63%;}
Henri Koivunevabd03c012017-11-23 02:20:26 +0200[diff] [blame]1302 .animation[data-animation-step="3"] .device {margin-top:0%;width:28%; height:80%;}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1303 .animation .device .display div div {font-size:15px;}
1304 }
1305 @media (max-width:460px) {
1306 .animation[data-animation-step="1"] .device {margin-top:0%;width:58%; height:61%;}
1307 .animation[data-animation-step="2"] .device {margin-top:0%;width:54%; height:55%;}
Henri Koivuneva0e02df62017-11-23 04:33:04 +0200[diff] [blame]1308 .animation[data-animation-step="3"] .device {margin-top:0%;width:25%; height:72%;}
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1309 .animation .device .display div div {font-size:15px;}
1310 }
Henri Koivuneva0d2da122017-11-23 01:22:34 +0200[diff] [blame]1311 @media (max-width:350px) {
1312 .animation[data-animation-step="1"] .device {margin-top:3%;width:62%; height:65%;}
1313 .animation[data-animation-step="2"] .device {margin-top:3%;width:58%; height:60%;}
1314 .animation[data-animation-step="3"] .device {margin-top:9%;width:30%; height:80%;}
1315 .animation .device .display div div {font-size:15px;}
1316 }
Henri Koivuneva9d598a52017-11-23 01:56:48 +0200[diff] [blame]1317 @media (max-width:320px) {
1318 .animation[data-animation-step="1"] .device {margin-top:6%;width:62%; height:65%;}
1319 .animation[data-animation-step="2"] .device {margin-top:6%;width:58%; height:60%;}
1320 .animation[data-animation-step="3"] .device {margin-top:12%;width:30%; height:80%;}
1321 .animation .device .display div div {font-size:15px;}
1322 }
Henri Koivuneva9c1e2432017-11-22 22:01:33 +0200[diff] [blame]1323
1324/* More media queries */
1325@media (max-width: 430px) {
1326 h2, .h2 {font-size: 30px;}
1327}