Gitiles
Code Review Sign In
review.blissroms.org / blissroms.github.io / e40fbecfb1f6d109212dcd5fa64fa4a91ddfd00e / . / css / style.css
blob: 380d502f9d08fb6eff537f4daa24abc9780c9f3d [file] [log] [blame]
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]1
2@import url("https://fonts.googleapis.com/css?family=Comfortaa:400,700,300|Quattrocento");
3.about-tools ul li, .contact-social-icons ul a li {
4 text-align: center; }
5
6.centered {
7 float: none;
8 margin-left: auto;
9 margin-right: auto; }
10
Unknowne40fbec2017-10-09 14:44:15 -0400[diff] [blame^]11
12.vcenter {
13 display: inline-block;
14 vertical-align: middle;
15 float: none; }
16
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]17.break {
18 clear: both;
19 margin-top: 10px; }
20
21@media (min-width: 768px) {
22 .pull-right-sm {
23 float: right !important; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]24 .pull-left-sm {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]25 float: left !important; }
26 .container {width: 768px}
27 .navbar-right {margin-right: 0;}
Henri Koivuneva7be39422017-08-13 02:27:56 +0300[diff] [blame]28 .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {margin-left: 0;padding-left: 15px}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]29}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]30@media (min-width: 992px) {
31 .pull-right-md {
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]32@import url("https://fonts.googleapis.com/css?family=Comfortaa:400,700,300|Quattrocento");
33.about-tools ul li, .contact-social-icons ul a li {
34 text-align: center; }
35
36.centered {
37 float: none;
38 margin-left: auto;
39 margin-right: auto; }
40
41.break {
42 clear: both;
43 margin-top: 10px; }
44
45@media (min-width: 768px) {
46 .pull-right-sm {
47 float: right !important; }
48 .pull-left-sm {
49 float: left !important; }
50 .container {width: 768px}
51 .navbar-right {margin-right: 0;}
52 .navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {margin-left: 0;padding-left: 15px}
53}
54@media (min-width: 992px) {
55 .pull-right-md {
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]56 float: right !important; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]57 .pull-left-md {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]58 float: left !important; }
59 .container {width: 94%;}
60}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]61@media (min-width: 1200px) {
62 .pull-right-lg {
63 float: right !important; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]64 .pull-left-lg {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]65 float: left !important; }
66 .container {width: 1170px;}
67 .portfolio-projects .col-lg-6 {width: 100%}
Henri Koivuneva7be39422017-08-13 02:27:56 +0300[diff] [blame]68 .navbar > .container {max-width: 1170px}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]69}
70@media (min-width: 1366px) {
71 #portfolio > .container, #about > .row {width: 90%;max-width: 1600px;margin-left:auto;margin-right: auto;}
Henri Koivunevabd26b6b2017-08-13 02:33:00 +0300[diff] [blame]72 .navbar > .container {max-width: 1170px}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]73}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]74* {
75 box-sizing: border-box; }
76
77html {
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]78 /* position: relative; */
79 /* height: 100%; */
80 /* width: 100%; */
81 }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]82
83img {
84 width: 100%; }
85
86body {
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]87 /* height: 100%; */
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]88 font-family: "Comfortaa", Helvetica, Arial, sans-serif;
Henri Koivuneva468d1692017-08-12 16:24:41 +0300[diff] [blame]89 line-height: 1.4;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]90 background-color: #0080ff;
91 /* Margin bottom by footer height */
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]92 /* margin-bottom: 60px; */
93 }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]94
Henri Koivuneva468d1692017-08-12 16:24:41 +0300[diff] [blame]95h1, .h1,
96h2, .h2,
97h3, .h3,
98h4, .h4,
99h5, .h5,
100h6, .h6 {
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]101 font-family: "Comfortaa", Helvetica, Arial, sans-serif;
Henri Koivuneva468d1692017-08-12 16:24:41 +0300[diff] [blame]102 line-height: 1.4;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]103 color: #07374a; }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]104h1, .h1 {font-size: 64px;}
105h2, .h2 {font-size: 42px;}
106h4, .h4 {font-weight: bolder;}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]107
108p {
109 font-family: "Comfortaa", sans-serif;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]110 color: #ffffff;
111 margin: 0 0 30px; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]112
Henri Koivuneva0f988192017-08-12 15:28:05 +0300[diff] [blame]113a, .btn {
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300[diff] [blame]114 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
115 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]116}
117
Henri Koivuneva7f266022017-08-12 15:25:19 +0300[diff] [blame]118a:hover, a:focus, a:active {text-decoration: none;}
119
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]120body > .container-fluid {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300[diff] [blame]121 padding: 0; }
Henri Koivuneva7edca392017-08-12 16:23:52 +0300[diff] [blame]122
Henri Koivunevaf63e2a92017-08-12 16:37:49 +0300[diff] [blame]123#portfolio > .container {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]124 padding-left: 30px;
125 padding-right: 30px;
126}
127#portfolio > div > div > div {padding-right: 0;padding-left: 0}
Henri Koivunevaf63e2a92017-08-12 16:37:49 +0300[diff] [blame]128
Henri Koivunevabcf672a2017-08-12 16:25:03 +0300[diff] [blame]129.row,
130.container-fluid>.navbar-collapse,
131.container-fluid>.navbar-header,
132.container>.navbar-collapse,
133.container>.navbar-header {
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]134 margin:auto;
135}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]136
137.container-fluid .text-muted {
138 margin: 20px 0; }
139
140.btn:focus, a:focus {
141 outline: none !important; }
142
143.navbar {
144 height: 70px;
145 background-color: transparent;
146 background: transparent;
147 border: none;
148 color: #ffffff;
149 z-index: 100;
150 margin-bottom: 0;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]151 padding-left: 30px;
152 padding-right: 30px;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]153 border-radius: 0;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300[diff] [blame]154 -webkit-transition: background-color .2s ease 0s;
Unknown2e345c42017-08-14 18:25:38 -0400[diff] [blame]155 transition: background-color .2s ease 0s; }
Henri Koivuneva3de908d2017-08-13 02:43:42 +0300[diff] [blame]156.navbar > .container {padding: 4px 0 0 0;width: 100%;margin-top:2px;}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]157.navbar-brand {
Henri Koivunevae1841232017-08-12 21:55:21 +0300[diff] [blame]158 opacity: 0;
Henri Koivuneva3de908d2017-08-13 02:43:42 +0300[diff] [blame]159 margin-top: 5px;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]160 padding: 15px 0;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]161 color: #ffffff;
162 font-weight: 400; }
163
164.navbar-default .navbar-nav > li > a {
165 color: #ffffff;
166 font-weight: 500;
167 font-size: 1em;
168 text-transform: lowercase;
Henri Koivuneva3de908d2017-08-13 02:43:42 +0300[diff] [blame]169 margin: 3px 5px;
Henri Koivunevac93da972017-08-12 15:18:06 +0300[diff] [blame]170 border: 1px solid transparent;
Henri Koivuneva4d964cb2017-08-12 15:22:55 +0300[diff] [blame]171 border-radius: 5px;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300[diff] [blame]172 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
173 transition: color .2s ease 0s, border-color .2s ease 0s; }
Henri Koivunevabcf672a2017-08-12 16:25:03 +0300[diff] [blame]174 .navbar-default .navbar-nav > li:last-child > a {margin-right: 0}
Henri Koivunevac93da972017-08-12 15:18:06 +0300[diff] [blame]175.navbar-default .navbar-nav > li > a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]176 color: #ffffff;
177 border: 1px solid #ffffff; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300[diff] [blame]178.navbar-default .navbar-nav > li > a:active,
179.navbar-default .navbar-nav > li > a:focus,
180.navbar.solid .navbar-nav > li > a:active, .navbar.solid .navbar-nav > li > a:focus {
181 color: rgba(255,255,255,0.8);
182 border: 1px solid rgba(255,255,255,0.8); }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]183.navbar-default .navbar-nav > li > a:visited {
184 color: #ffffff;
185 text-decoration: none; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300[diff] [blame]186.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]187 background-color: transparent;
188 color: #ffffff; }
Henri Koivunevac93da972017-08-12 15:18:06 +0300[diff] [blame]189.navbar-default .navbar-nav > .active > a:focus,
190.navbar.solid .navbar-nav > li > a:active,
191.navbar.solid .navbar-nav > li > a:focus {
192 background-color: transparent;
193 color: rgba(255,255,255,0.8); }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]194.navbar-toggle {margin-right:0px;padding:15px;}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]195.navbar-default .navbar-toggle {
196 border-color: #ffffff; }
197 .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]198 background-color: #07374a;
199 }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]200 .navbar-default .navbar-toggle .icon-bar {
201 color: #ffffff;
202 background-color: #ffffff; }
Henri Koivuneva6b7c7962017-08-12 21:54:58 +0300[diff] [blame]203.navbar-default .navbar-collapse.collapse.in ul {
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]204 background-color: #07374a;
205}
Henri Koivuneva6b7c7962017-08-12 21:54:58 +0300[diff] [blame]206.navbar-collapse.collapsing {
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]207 background-color: #07374a;
Henri Koivuneva5e6ed7a2017-08-12 18:14:02 +0300[diff] [blame]208}
209.navbar-default .navbar-toggle .icon-bar {
210 color: #ffffff;
211 background-color: #ffffff; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]212.navbar-default .navbar-collapse.collapse.in ul {
nilac8991c1655032017-08-19 12:37:44 +0200[diff] [blame]213 background-color: #07374a;
Henri Koivuneva5e6ed7a2017-08-12 18:14:02 +0300[diff] [blame]214}
Unknown94e4caa2017-08-12 10:48:07 -0400[diff] [blame]215.navbar-collapse.collapse.collapsing {
216 background-color: #07374a;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]217}
nilac8991c1655032017-08-19 12:37:44 +0200[diff] [blame]218
Henri Koivuneva5e6ed7a2017-08-12 18:14:02 +0300[diff] [blame]219.navbar-collapse.collapse.show {
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]220 background-color: #07374a;
221 -webkit-transition: background-color .2s ease 0s;
222 transition: background-color .2s ease 0s;
Henri Koivunevae15afea2017-08-12 18:23:45 +0300[diff] [blame]223 -webkit-border-bottom-left-radius: 4px;
224 -webkit-border-bottom-right-radius: 4px;
225 border-bottom-left-radius: 4px;
226 border-bottom-right-radius: 4px;
Henri Koivuneva17653c52017-08-12 18:12:07 +0300[diff] [blame]227}
Henri Koivuneva936cb392017-08-12 18:49:20 +0300[diff] [blame]228
229.navbar-collapse .navbar-nav > li > a,
230.navbar-collapse .navbar-nav > li > a:hover,
231.navbar-collapse .navbar-nav > li > a:focus,
232.navbar-collapse .navbar-nav > li > a:active {
233 border-color: transparent !important;
234}
235
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]236/* Solid class attached on scroll past first section */
237.navbar.solid {
238 background-color: #07374a;
Unknown2e345c42017-08-14 18:25:38 -0400[diff] [blame]239 top: 0;
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]240 width: 100%;
241 margin: 0px 0%;
Unknown2e345c42017-08-14 18:25:38 -0400[diff] [blame]242 box-shadow: 0 7px 8px 0px rgba(0,0,0,0.3);
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300[diff] [blame]243 -webkit-transition: background-color .2s ease 0s;
244 transition: background-color .2s ease 0s;
Unknown2e345c42017-08-14 18:25:38 -0400[diff] [blame]245 -webkit-transition: box-shadow .2s ease 0s;
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]246 transition: box-shadow .2s ease 0s;
247 }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]248 .navbar.solid .navbar-brand {
Henri Koivunevae1841232017-08-12 21:55:21 +0300[diff] [blame]249 opacity: 1;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]250 display: inline-block;
251 color: #ffffff;
Henri Koivunevae1841232017-08-12 21:55:21 +0300[diff] [blame]252 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
253 transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]254 .navbar.solid .navbar-nav > li > a {
255 color: #ffffff;
Henri Koivunevaf70ddbc2017-08-12 15:36:36 +0300[diff] [blame]256 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
257 transition: color .2s ease 0s, border-color .2s ease 0s; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]258
259.cover {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300[diff] [blame]260 padding: 6% 0 8% 0; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]261 .cover.top {
Henri Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]262 padding: 10vh 0 15vh 0;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]263 height: 100vh;
264 display: -webkit-box;
265 display: -ms-flexbox;
266 display: flex;
267 background-color: #0080ff; }
268 .cover.bottom {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300[diff] [blame]269 padding: 6% 0 5.5% 0; }
270 body > .cover.bottom:nth-child(4) {padding: 6% 0 5.5% 0 !important}
Henri Koivuneva04797472017-08-12 18:35:39 +0300[diff] [blame]271 @media (max-width: 550px) {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]272 .cover, .cover.bottom {padding: 17.5% 30px 17.5% 30px; } }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]273
274.headline {
275 padding-top: 6.25em; }
Henri Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]276 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]277 max-width: 1600px;
278 width: 100%;
Henri Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]279 margin: 0 auto;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]280 padding-right: 30px;
281 padding-left: 30px;
Henri Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]282 display: block; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]283 @media screen and (min-width: 768px) {
284 .headline {
285 padding-top: 3.75em; } }
286 @media screen and (min-width: 992px) {
287 .headline {
288 padding-top: 1.5625em; } }
289 @media screen and (min-width: 1200px) {
290 .headline {
291 padding-top: 0px; } }
292
293#about {
294 background-color: #07374a; }
295 #about h2 {
296 color: #0080ff; }
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300[diff] [blame]297 #about > div > div.row.break > div > p {margin-bottom: 15px}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]298
299.profile-img {
300 margin-bottom: 15px;
301 width: 120px; }
302
303.about, .about-info, .about-tools, .about-last {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]304 padding: 4% 30px 1% 30px;
305 font-size: 18px; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]306 .about-tools {
307 padding-top: 4.375em;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]308 font-size: 18px; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]309 @media screen and (min-width: 992px) {
310 .about-tools {
311 padding-top: 5.625em; } }
312 .about-tools ul:first-child {
313 padding-left: 0px; }
314 .about-tools ul {
315 color: #0080ff;
316 list-style: none; }
317 .about-tools ul li {
318 padding-top: 0.75em; }
319 .about-last {
320 padding-top: 3.125em;
321 padding-bottom: 0;
322 font-size: 1.125em; }
323 @media screen and (min-width: 992px) {
324 .about-last {
325 padding-top: 0; } }
326 .about-last p {
327 color: #0080ff; }
328
329#portfolio {
330 background-color: #0080ff; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]331
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]332.portfolio-projects--btn {
333 background: transparent;
334 color: #07374a;
335 border: 1px solid #07374a;
336 border-radius: 5px;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]337 margin-bottom: 1.25em;
338 font-size: 18px;
339 margin: 0 8px; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]340 .portfolio-projects--btn:hover {
341 background: #07374a;
342 color: #ffffff; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300[diff] [blame]343 .portfolio-projects--btn:focus,
344 .portfolio-projects--btn:active {
345 background: #052a38;
346 color: #ffffff; }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]347.portfolio-projects--image {
348 margin-bottom: 1.875em;
349 padding-top: 5%; }
350
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]351@media screen and (min-width: 360px) {
352 #team > .container .row > div {width: 100%;margin: 0;}
353}
354
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]355@media screen and (min-width: 768px) {
356 .portfolio-projects {
357 margin-top: 0.625em; } }
358.portfolio-projects--title {
359 margin-top: 0.9375em;
360 font-size: 20px; }
361 @media screen and (min-width: 768px) {
362 .portfolio-projects--title {
363 margin-top: 0;
364 font-size: 21px; }
365 .portfolio-projects--desc {
366 margin-top: 30px;
367 margin-bottom: 30px;
368 font-size: 16px; }
369 .portfolio-projects--btn {font-size: 14px;margin:0 4px 16px 4px;}
370 #portfolio > div > div > div:nth-child(1) > div > div.col-sm-5.text-center,
371 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-7.text-center.pull-right-sm {padding-left:0;}
372 #portfolio > div > div > div:nth-child(1) > div > div.col-sm-7.text-center,
373 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm {padding-right: 0;} }
374 @media screen and (min-width: 992px) {
375 .portfolio-projects--title {
376 margin-top: 15%;
377 font-size: 30px; }
378 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-left:-8px;}
379 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(5) {margin-right:-8px;} }
380 @media screen and (min-width: 1080px) {
381 .portfolio-projects--title {
382 margin-top: 24%;
383 font-size: 21px; }
384 }
385 @media screen and (min-width: 1200px) {
386 .portfolio-projects--title {
387 margin-top: 24%;
388 font-size: 24px; }
389 .portfolio-projects--desc {
390 margin-top: 30px;
391 margin-bottom: 30px;
392 font-size: 18px; }
393 .portfolio-projects .col-lg-6 + .col-lg-6 + .col-lg-6 {margin-top:40px}
394 .portfolio-projects--btn {font-size: 18px;margin:0 8px;} }
395 @media screen and (min-width: 1366px) {
396 .portfolio-projects--title {margin-top:28%;}
397 }
398 @media (min-width: 1500px) {
399 .portfolio-projects--title {font-size: 28px;margin-top:31%;}
400 .portfolio-projects--btn {font-size: 21px}
401 }
402
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]403#contact {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]404 background-color: #07374a;
405 padding-left: 15px;
406 padding-right: 15px }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]407 #contact h2 {
408 color: #0080ff; }
409
410.contact-social-icons p {
411 color: #0080ff; }
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]412.contact-social-icons > ul {padding:0;margin:0 auto;}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]413.contact-social-icons ul a {
414 color: #0080ff;
415 list-style: none; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300[diff] [blame]416 .contact-social-icons ul a:hover,
Henri Koivunevabef78a62017-08-12 22:32:07 +0300[diff] [blame]417 .team-links-list a:hover,
418 .family-links-list a:hover {
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]419 color: #ffffff; }
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300[diff] [blame]420 .contact-social-icons ul a:focus,
421 .contact-social-icons ul a:active,
422 .team-links-list a:focus,
Henri Koivunevabef78a62017-08-12 22:32:07 +0300[diff] [blame]423 .team-links-list a:active,
424 .family-links-list a:focus,
425 .family-links-list a:active {
Henri Koivunevad8283ac2017-08-12 15:05:35 +0300[diff] [blame]426 color: rgba(255,255,255,0.8); }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]427 .contact-social-icons ul a li {
428 display: inline-block;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]429 padding: 1.25%;
430 font-size: 16px }
Henri Koivuneva16234182017-08-13 03:09:43 +0300[diff] [blame]431 @media (max-width: 1200px) {
Henri Koivunevac9c6ac62017-08-13 03:12:28 +0300[diff] [blame]432 #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]433 #family > div > div.row > div.center > div:last-child {margin-bottom: 0}
434 }
435 @media (max-width: 720px) {
436 #family > div > div.row > div.center > div {margin:1.5em 4% 3em 4%;width:92%;}
437 }
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]438
439.footer {
Henri Koivuneva28ce8c62017-08-13 03:01:23 +0300[diff] [blame]440 padding-top: 1em;
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]441 bottom: 0;
442 width: 100%;
443 /* Set the fixed height of the footer here */
Unknownf0310a82017-08-12 19:32:49 -0400[diff] [blame]444 background-color: #052a38;
445
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]446 color: #ffffff; }
electrikjesus34f27d12017-08-12 17:13:35 -0400[diff] [blame]447.footer-role, .footer-name, .footer-description {
448 color: #FFFFFF;
449}
450.footer-description {
451 color: #fff;
452 font-size: 18px;
453}
454.footer-role h4, .footer-links-list a {
455 color: #0080ff;
456}
457.footer-header h4 {
458 color: #0080ff;
459}
Unknown8e40a3b2017-07-30 14:47:14 -0400[diff] [blame]460#scrollIcon, #scrollTopIcon {
461 margin-top: 200px;
462 padding: 10px;
463 font-size: 1.5em;
464 color: #07374a;
465 border: solid 2px #07374a;
466 border-radius: 50%; }
467
468#scrollTopIcon {
469 margin-top: 10px;
470 font-size: 1em;
471 color: #ffffff;
472 border-color: #ffffff; }
473
474.back-to-top {
475 display: none; }
476 .back-to-top.visible {
477 display: block; }
Unknown423f0342017-07-30 16:44:34 -0400[diff] [blame]478
479/* our team section */
Henri Koivunevabef78a62017-08-12 22:32:07 +0300[diff] [blame]480#team, #family {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]481 background-color: #0080ff;
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]482 /*font-weight: 700;
483 font-size: 21px; */
Unknown423f0342017-07-30 16:44:34 -0400[diff] [blame]484}
485.hr.invisible_hr {
486 height: 0;
487 padding: 0;
488}
489.hr.big_size_hr {
490 margin: 30px 0;
491}
492.hr {
493 clear: both;
494 display: block;
495 font-size: 0;
496 height: 24px;
497 margin: 20px 0;
498 overflow: hidden;
499 padding: 2px 0;
500 position: relative;
501 text-align: center;
502 width: 100%;
503}
504.highlight_secondary {
505 color: #FFFFFF;
506}
Henri Koivuneva984bf522017-08-12 14:51:57 +0300[diff] [blame]507.team-role, .team-name, .team-links-list a {
Unknown423f0342017-07-30 16:44:34 -0400[diff] [blame]508 color: #07374a;
nilac8991c1655032017-08-19 12:37:44 +0200[diff] [blame]509 text-align: center;
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]510 white-space: normal;
511 width: 100%;
Unknown4f1903e2017-07-30 19:40:03 -0400[diff] [blame]512}
nilac8991c1655032017-08-19 12:37:44 +0200[diff] [blame]513.team-name, .family-name {
514 font-size: 21px;
515 text-align: center;
516 white-space: nowrap;
517}
Henri Koivunevabef78a62017-08-12 22:32:07 +0300[diff] [blame]518.team-links, .family-links {
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]519 padding-top: .75em;
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]520 color: #07374a;
nilac8991c1655032017-08-19 12:37:44 +0200[diff] [blame]521 text-align: center;
Henri Koivuneva984bf522017-08-12 14:51:57 +0300[diff] [blame]522}
Henri Koivunevabef78a62017-08-12 22:32:07 +0300[diff] [blame]523.team-image img, .family-image img {
Henri Koivunevac5e99ce2017-08-12 15:59:30 +0300[diff] [blame]524 max-width:150px;
525 max-height: 150px;
526 margin:0 auto;
Henri Koivuneva4c866502017-08-12 17:14:37 +0300[diff] [blame]527}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]528#team > .container .row > div {
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]529 min-height: 0px;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]530 padding-left: 0;
531 padding-right: 0;
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]532 /* display: flex; */
533 /* flex-wrap: wrap; */
534 /* justify-content: flex-start; */
535}
536 @media (min-width: 768px) {
537 #team > .container .row > div {min-height: 0px;}
538 #team .col-sm-4 {
539 width: 100%;
540 margin: 0;
541 }
542 }
543 @media (min-width: 992px) {
544 #team .col-md-2 {
545 width: 100%;
546 margin: 0;
547 }
548 }
549 @media (min-width: 1200px) {
550 #team > .container .row > div {min-height: 0px;}
551 }
552 @media (max-width: 700px) {
553 #team > .container .row > div {min-height: 0px;}
554 #team .col-xs-6 {width: 42%;margin:4%;}
555 }
556 @media (max-width: 500px) {
557 #team > .container .row > div {min-height: 250px;}
558 #team .col-xs-6 {width: 92%;margin:4%;}
559 }
560#team > .container .row > .row, #team > .container {padding-left:0;padding-right: 0}
561
562/* Bliss family section */
563#family {
564 background-color: #07374a;
565}
566#family > div > div.row > div {font-size: 18px}
567.family-role, .family-name, .family-description {
568 color: #FFFFFF;
569}
570.family-description {
571 color: #fff;
572 font-size: 18px;
573}
574.family-role h4, .family-links-list a {
575 color: #0080ff;
576}
577.family-header h2 {
578 color: #0080ff;
579}
580#family .about-tools {
581 font-size: 20px;
582}
583.family-image img {
584 max-width:150px;
585 max-height: 150px;
586 margin:0 auto;
587}
588.family-projects--btn {
589 background: transparent;
590 color: #0080ff;
591 border: 1px solid #0080ff;
592 border-radius: 5px;
593 margin-bottom: 1.25em;
594 font-weight: 700;
595 font-size: 21px; }
596 .family-projects--btn:hover {
597 background: #0080ff;
598 color: #ffffff; }
599 .family-projects--btn:focus,
600 .family-projects--btn:active {
601 background: #0080ff;
602 color: #ffffff; }
603
604@media (max-height: 880px) {
605 #scrollIcon, #scrollTopIcon {margin-top: 15vh}
606}
607@media (max-height: 800px) {
608 #scrollIcon, #scrollTopIcon {margin-top: 10vh}
609 .cover.top {padding: 7.5vh 0 12.5vh 0;}
610}
611@media (max-height: 750px) {
612 #scrollIcon, #scrollTopIcon {margin-top: 8vh}
613}
614@media (max-height: 720px) {
615 #scrollIcon, #scrollTopIcon {margin-top: 5vh}
616 .cover.top {padding: 5vh 0 10vh 0;}
617}
618@media (max-height: 650px) {
619 #scrollIcon, #scrollTopIcon {margin-top: 5vh}
620 .cover.top {padding: 2.5vh 0 5vh 0;}
621 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 42vh;}
622}
623@media (max-height: 550px) {
624 #scrollIcon, #scrollTopIcon {margin-top: 5vh}
625 .cover.top {padding: 1.5vh 0 3vh 0;}
626 .headline {padding-top:3vh;}
627 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
628}
629@media (max-height: 480px) {
630 #scrollIcon, #scrollTopIcon {margin-top: 0}
631 .cover.top {padding: 3vh 0 3vh 0;}
632 .headline {padding-top:1.5vh;}
633 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
634}
635@media (max-height: 320px) {
636 .cover.top {padding: 1vh 0 3vh 0;}
637 .headline {padding-top:1vh;}
638 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 25vh;}
639}
640@media (max-width: 768px) {
641 .container-fluid {padding:30px 0 !important;}
642 .h1, .h2, .h3, h1, h2, h3 {
643 margin-top: 10px;
644 margin-bottom: 10px;
645 }
646 .lead, .about, .about-info, .about-tools, .about-last {font-size: 16px}
647 .row.cover.top .lead {
648 max-width: 350px;
649 margin-left:auto;
650 margin-right: auto
651 }
652 .h4, h4 {font-size: 20px}
653 #portfolio h2 {padding-bottom: 0}
654 #portfolio > .container {padding-right: 0;padding-left: 0}
655 .portfolio-projects--btn {margin-top:1.25em;margin-left: auto;margin-right: auto}
656 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-right: 4px}
657 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(5) {margin-left: 4px}
658 #scrollIcon, #scrollTopIcon {font-size: 1em}
659}
660@media (max-device-height: 480px) and (orientation: landscape) {
661 .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
662 max-height: 240px;
663 }
664 .navbar-nav>li>a {
665 padding-top: 6px;
666 padding-bottom: 6px;
667 }
668}
669@media (max-width: 360px) {
670 .h1, h1 {font-size: 32px;}
671 .cover, .cover.bottom {
672 padding-left: 15px;
673 padding-right: 15px;
674 }
675}
676
677/* --- Mock-up Setting --- */
678/* Paste link to your image 310x550px */
679/* Screen Setting */
680/* --- --- */
681/* --- Animation Setting --- */
682/* --- --- */
683
684h1 {
685 color: #fff;
686 cursor: default;
687}
688
689h1 span:nth-of-type(1) {
690 font-size: 1em;
691 line-height: 0.5em;
692}
693h1 span:nth-of-type(2) {
694 font-size: .4em;
695 font-weight: 400;
696 line-height: 3.65em;
697 color: #0080ff;
698 background-color: #282828;
699 padding: 3px 10px;
700 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.6);
701}
702h1 span:nth-of-type(3) {
703 font-size: 1.5em;
704 line-height: .85em;
705}
706
707.space {
708 will-change: transform;
709 position: relative;
710 left:-25;
711 top:auto;
712 bottom:auto;
713 margin-top:15%;
714 margin-bottom:25%;
715 margin-left: 35%;
716 margin-right: auto
717 -webkit-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
718 transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
719 -webkit-transition: all 600ms;
720 transition: all 600ms;
721}
722
723.space-hover {
724 position: relative;
725 left:-25;
726 top:auto;
727 bottom:auto;
728 margin-top:30%;
729 margin-bottom:25%;
730 margin-left: 45%;
731 margin-right: auto
732 -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
733 transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
734}
735
736.phone-container {
737 width: 11.2em;
738 height: 23.33em;
739 position: absolute;
740 top: 0;
741 bottom: 0;
742 left: 0;
743 right: 0;
744 margin: auto;
745 -webkit-transform-style: preserve-3d;
746 transform-style: preserve-3d;
747 -webkit-transform: translateX(-80%);
748 transform: translateX(-80%);
749 border-radius: 2.0em;
750}
751
752.phone-front {
753 will-change: transform;
754 width: 11.2em;
755 height: 23.33em;
756 position: absolute;
757 top: 0;
758 bottom: 0;
759 left: 0;
760 right: 0;
761 margin: auto;
762 background-image: url("../images/phone_front.svg");
763 background-repeat: no-repeat;
764 background-position: -.53em 0;
765 background-size: 12.3em 23.36em;
766 border-radius: 2.0em;
767 box-shadow: -20px 27px 13px 10px rgba(0, 0, 0, 0.5);
768 -webkit-transition: -webkit-transform 600ms;
769 transition: -webkit-transform 600ms;
770 transition: transform 600ms;
771 transition: transform 600ms, -webkit-transform 600ms;
772 -webkit-transition: box-shadow 450ms;
773 transition: box-shadow 450ms;
774}
775
776.just-phone-front {
777 will-change: transform;
778 width: 11.2em;
779 height: 23.33em;
780 position: absolute;
781 right: 0;
782 margin: auto;
783 left:-25;
784 top:0;
785 bottom:auto;
786 margin-top:10%;
787 margin-bottom:15%;
788 margin-left: 35%;
789 margin-right: auto;
790 background-image: url("../images/phone_front.svg");
791 background-repeat: no-repeat;
792 background-position: -.53em 0;
793 background-size: 12.3em 23.36em;
794 border-radius: 2.0em;
795 box-shadow: -10px 13px 7px 5px rgba(0, 0, 0, 0.5);
796 -webkit-transform: scale(0.90);
797 transform: scale(0.90);
798 -webkit-transition: -webkit-transform 600ms;
799 transition: -webkit-transform 600ms;
800 transition: transform 600ms;
801 transition: transform 600ms, -webkit-transform 600ms;
802 -webkit-transition: box-shadow 450ms;
803 transition: box-shadow 450ms;
804}
805
806.phone-front-hover {
807 box-shadow: 0 12px 13px 10px rgba(0, 0, 0, 0.5);
808 -webkit-transition: -webkit-transform 600ms;
809 transition: -webkit-transform 600ms;
810 transition: transform 600ms;
811 transition: transform 600ms, -webkit-transform 600ms;
812 -webkit-transition: box-shadow 450ms;
813 transition: box-shadow 450ms;
814}
815
816.phone-screen {
817 width: 10.5em;
818 height: 19.3em;
819 position: relative;
820 left: 0;
821 right: 0;
822 top: 2.283em;
823 margin: auto;
824 background-color: #000;
825 overflow: hidden;
826}
827.phone-screen::before {
828 content: "";
829 position: absolute;
830 width: 100%;
831 height: 100%;
832 box-shadow: inset 13px 0 10px -5px rgba(250, 250, 250, 0.17), inset -13px 0 10px -5px rgba(250, 250, 250, 0.17);
833 background-image: url("../images/bliss_screens.gif");
834 background-repeat: no-repeat;
835 background-position: 50% 0px;
836 background-size: cover;
837 -webkit-transform: scale(1);
838 transform: scale(1);
839}
840.phone-screen::after {
841 content: "";
842 position: absolute;
843 width: 100%;
844 height: 100%;
845 background-color: rgba(250, 250, 250, 0.1);
846}
847
848.phone-side {
849 will-change: transform;
850 width: 13.33em;
851 height: 25em;
852 position: absolute;
853 top: 0;
854 bottom: 0;
855 left: 0;
856 right: 0;
857 margin: auto;
858 border-radius: 1.66em;
859 background-repeat: no-repeat;
860 background-position: 2.2em .5em;
861 background-size: 13.33em 24.73em;
862 -webkit-transform-style: preserve-3d;
863 transform-style: preserve-3d;
864 -webkit-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
865 transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
866 -webkit-transition: all 350ms;
867 transition: all 350ms;
868}
869
870.phone-side-hover {
871 -webkit-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
872 transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
873 -webkit-transition: all 350ms;
874 transition: all 350ms;
875}
876
877@-webkit-keyframes figure-anim {
878 from {
879 border-radius: 50%;
880 -webkit-transform: rotate(0deg) scale(1);
881 transform: rotate(0deg) scale(1);
882 }
883 to {
884 border-radius: 30%;
885 -webkit-transform: rotate(360deg) scale(0.5);
886 transform: rotate(360deg) scale(0.5);
887 }
888}
889
890@keyframes figure-anim {
891 from {
892 border-radius: 50%;
893 -webkit-transform: rotate(0deg) scale(1);
894 transform: rotate(0deg) scale(1);
895 }
896 to {
897 border-radius: 30%;
898 -webkit-transform: rotate(360deg) scale(0.5);
899 transform: rotate(360deg) scale(0.5);
900 }
901}
902@-webkit-keyframes figure-container-anim {
903 from {
904 -webkit-transform: rotate(0deg);
905 transform: rotate(0deg);
906 }
907 to {
908 -webkit-transform: rotate(360deg);
909 transform: rotate(360deg);
910 }
911}
912@keyframes figure-container-anim {
913 from {
914 -webkit-transform: rotate(0deg);
915 transform: rotate(0deg);
916 }
917 to {
918 -webkit-transform: rotate(360deg);
919 transform: rotate(360deg);
920 }
921}
922
923 float: right !important; }
924 .pull-left-md {
925 float: left !important; }
926 .container {width: 94%;}
927}
928@media (min-width: 1200px) {
929 .pull-right-lg {
930 float: right !important; }
931 .pull-left-lg {
932 float: left !important; }
933 .container {width: 1170px;}
934 .portfolio-projects .col-lg-6 {width: 100%}
935 .navbar > .container {max-width: 1170px}
936}
937@media (min-width: 1366px) {
938 #portfolio > .container, #about > .row {width: 90%;max-width: 1600px;margin-left:auto;margin-right: auto;}
939 .navbar > .container {max-width: 1170px}
940}
941* {
942 box-sizing: border-box; }
943
944html {
945 /* position: relative; */
946 /* height: 100%; */
947 /* width: 100%; */
948 }
949
950img {
951 width: 100%; }
952
953body {
954 /* height: 100%; */
955 font-family: "Comfortaa", Helvetica, Arial, sans-serif;
956 line-height: 1.4;
957 background-color: #0080ff;
958 /* Margin bottom by footer height */
959 /* margin-bottom: 60px; */
960 }
961
962h1, .h1,
963h2, .h2,
964h3, .h3,
965h4, .h4,
966h5, .h5,
967h6, .h6 {
968 font-family: "Comfortaa", Helvetica, Arial, sans-serif;
969 line-height: 1.4;
970 color: #07374a; }
971h1, .h1 {font-size: 64px;}
972h2, .h2 {font-size: 42px;}
973h4, .h4 {font-weight: bolder;}
974
975p {
976 font-family: "Comfortaa", sans-serif;
977 color: #ffffff;
978 margin: 0 0 30px; }
979
980a, .btn {
981 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
982 transition: color .2s ease 0s, border-color .2s ease 0s, background-color .2s ease 0s;
983}
984
985a:hover, a:focus, a:active {text-decoration: none;}
986
987body > .container-fluid {
988 padding: 0; }
989
990#portfolio > .container {
991 padding-left: 30px;
992 padding-right: 30px;
993}
994#portfolio > div > div > div {padding-right: 0;padding-left: 0}
995
996.row,
997.container-fluid>.navbar-collapse,
998.container-fluid>.navbar-header,
999.container>.navbar-collapse,
1000.container>.navbar-header {
1001 margin:auto;
1002}
1003
1004.container-fluid .text-muted {
1005 margin: 20px 0; }
1006
1007.btn:focus, a:focus {
1008 outline: none !important; }
1009
1010.navbar {
1011 height: 70px;
1012 background-color: transparent;
1013 background: transparent;
1014 border: none;
1015 color: #ffffff;
1016 z-index: 100;
1017 margin-bottom: 0;
1018 padding-left: 30px;
1019 padding-right: 30px;
1020 border-radius: 0;
1021 -webkit-transition: background-color .2s ease 0s;
1022 transition: background-color .2s ease 0s; }
1023.navbar > .container {padding: 4px 0 0 0;width: 100%;margin-top:2px;}
1024.navbar-brand {
1025 opacity: 0;
1026 margin-top: 5px;
1027 padding: 15px 0;
1028 color: #ffffff;
1029 font-weight: 400; }
1030
1031.navbar-default .navbar-nav > li > a {
1032 color: #ffffff;
1033 font-weight: 500;
1034 font-size: 1em;
1035 text-transform: lowercase;
1036 margin: 3px 5px;
1037 border: 1px solid transparent;
1038 border-radius: 5px;
1039 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
1040 transition: color .2s ease 0s, border-color .2s ease 0s; }
1041 .navbar-default .navbar-nav > li:last-child > a {margin-right: 0}
1042.navbar-default .navbar-nav > li > a:hover {
1043 color: #ffffff;
1044 border: 1px solid #ffffff; }
1045.navbar-default .navbar-nav > li > a:active,
1046.navbar-default .navbar-nav > li > a:focus,
1047.navbar.solid .navbar-nav > li > a:active, .navbar.solid .navbar-nav > li > a:focus {
1048 color: rgba(255,255,255,0.8);
1049 border: 1px solid rgba(255,255,255,0.8); }
1050.navbar-default .navbar-nav > li > a:visited {
1051 color: #ffffff;
1052 text-decoration: none; }
1053.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover {
1054 background-color: transparent;
1055 color: #ffffff; }
1056.navbar-default .navbar-nav > .active > a:focus,
1057.navbar.solid .navbar-nav > li > a:active,
1058.navbar.solid .navbar-nav > li > a:focus {
1059 background-color: transparent;
1060 color: rgba(255,255,255,0.8); }
1061.navbar-toggle {margin-right:0px;padding:15px;}
1062.navbar-default .navbar-toggle {
1063 border-color: #ffffff; }
1064 .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
1065 background-color: #07374a;
1066 }
1067 .navbar-default .navbar-toggle .icon-bar {
1068 color: #ffffff;
1069 background-color: #ffffff; }
1070.navbar-default .navbar-collapse.collapse.in ul {
1071 background-color: #07374a;
1072}
1073.navbar-collapse.collapsing {
1074 background-color: #07374a;
1075}
1076.navbar-default .navbar-toggle .icon-bar {
1077 color: #ffffff;
1078 background-color: #ffffff; }
1079.navbar-default .navbar-collapse.collapse.in ul {
1080 background-color: #07374a;
1081}
1082.navbar-collapse.collapse.collapsing {
1083 background-color: #07374a;
1084}
1085
1086.navbar-collapse.collapse.show {
1087 background-color: #07374a;
1088 -webkit-transition: background-color .2s ease 0s;
1089 transition: background-color .2s ease 0s;
1090 -webkit-border-bottom-left-radius: 4px;
1091 -webkit-border-bottom-right-radius: 4px;
1092 border-bottom-left-radius: 4px;
1093 border-bottom-right-radius: 4px;
1094}
1095
1096.navbar-collapse .navbar-nav > li > a,
1097.navbar-collapse .navbar-nav > li > a:hover,
1098.navbar-collapse .navbar-nav > li > a:focus,
1099.navbar-collapse .navbar-nav > li > a:active {
1100 border-color: transparent !important;
1101}
1102
1103/* Solid class attached on scroll past first section */
1104.navbar.solid {
1105 background-color: #07374a;
1106 top: 0;
1107 width: 100%;
1108 margin: 0px 0%;
1109 box-shadow: 0 7px 8px 0px rgba(0,0,0,0.3);
1110 -webkit-transition: background-color .2s ease 0s;
1111 transition: background-color .2s ease 0s;
1112 -webkit-transition: box-shadow .2s ease 0s;
1113 transition: box-shadow .2s ease 0s;
1114 }
1115 .navbar.solid .navbar-brand {
1116 opacity: 1;
1117 display: inline-block;
1118 color: #ffffff;
1119 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s;
1120 transition: color .2s ease 0s, border-color .2s ease 0s, opacity .2s ease 0s; }
1121 .navbar.solid .navbar-nav > li > a {
1122 color: #ffffff;
1123 -webkit-transition: color .2s ease 0s, border-color .2s ease 0s;
1124 transition: color .2s ease 0s, border-color .2s ease 0s; }
1125
1126.cover {
1127 padding: 6% 0 8% 0; }
1128 .cover.top {
1129 padding: 10vh 0 15vh 0;
1130 height: 100vh;
1131 display: -webkit-box;
1132 display: -ms-flexbox;
1133 display: flex;
1134 background-color: #0080ff; }
1135 .cover.bottom {
1136 padding: 6% 0 5.5% 0; }
1137 body > .cover.bottom:nth-child(4) {padding: 6% 0 5.5% 0 !important}
1138 @media (max-width: 550px) {
1139 .cover, .cover.bottom {padding: 17.5% 30px 17.5% 30px; } }
1140
1141.headline {
1142 padding-top: 6.25em; }
1143 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {
1144 max-width: 1600px;
1145 width: 100%;
1146 margin: 0 auto;
1147 padding-right: 30px;
1148 padding-left: 30px;
1149 display: block; }
1150 @media screen and (min-width: 768px) {
1151 .headline {
1152 padding-top: 3.75em; } }
1153 @media screen and (min-width: 992px) {
1154 .headline {
1155 padding-top: 1.5625em; } }
1156 @media screen and (min-width: 1200px) {
1157 .headline {
1158 padding-top: 0px; } }
1159
1160#about {
1161 background-color: #07374a; }
1162 #about h2 {
1163 color: #0080ff; }
1164 #about > div > div.row.break > div > p {margin-bottom: 15px}
1165
1166.profile-img {
1167 margin-bottom: 15px;
1168 width: 120px; }
1169
1170.about, .about-info, .about-tools, .about-last {
1171 padding: 4% 30px 1% 30px;
1172 font-size: 18px; }
1173 .about-tools {
1174 padding-top: 4.375em;
1175 font-size: 18px; }
1176 @media screen and (min-width: 992px) {
1177 .about-tools {
1178 padding-top: 5.625em; } }
1179 .about-tools ul:first-child {
1180 padding-left: 0px; }
1181 .about-tools ul {
1182 color: #0080ff;
1183 list-style: none; }
1184 .about-tools ul li {
1185 padding-top: 0.75em; }
1186 .about-last {
1187 padding-top: 3.125em;
1188 padding-bottom: 0;
1189 font-size: 1.125em; }
1190 @media screen and (min-width: 992px) {
1191 .about-last {
1192 padding-top: 0; } }
1193 .about-last p {
1194 color: #0080ff; }
1195
1196#portfolio {
1197 background-color: #0080ff; }
1198
1199.portfolio-projects--btn {
1200 background: transparent;
1201 color: #07374a;
1202 border: 1px solid #07374a;
1203 border-radius: 5px;
1204 margin-bottom: 1.25em;
1205 font-size: 18px;
1206 margin: 0 8px; }
1207 .portfolio-projects--btn:hover {
1208 background: #07374a;
1209 color: #ffffff; }
1210 .portfolio-projects--btn:focus,
1211 .portfolio-projects--btn:active {
1212 background: #052a38;
1213 color: #ffffff; }
Unknowne40fbec2017-10-09 14:44:15 -0400[diff] [blame^]1214
Unknown23617452017-09-02 22:36:59 -0400[diff] [blame]1215.portfolio-projects--btn-sm {
1216 background: transparent;
1217 color: #07374a;
1218 border: 1px solid #07374a;
1219 border-radius: 5px;
1220 margin-bottom: 1.25em;
1221 font-size: 12px;
1222 margin: 0 8px; }
1223 .portfolio-projects--btn-sm:hover {
1224 background: #07374a;
1225 color: #ffffff; }
1226 .portfolio-projects--btn-sm:focus,
1227 .portfolio-projects--btn-sm:active {
1228 background: #052a38;
1229 color: #ffffff; }
Unknowne40fbec2017-10-09 14:44:15 -0400[diff] [blame^]1230
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]1231.portfolio-projects--image {
1232 margin-bottom: 1.875em;
1233 padding-top: 5%; }
1234
1235@media screen and (min-width: 360px) {
1236 #team > .container .row > div {width: 100%;margin: 0;}
1237}
1238
1239@media screen and (min-width: 768px) {
1240 .portfolio-projects {
1241 margin-top: 0.625em; } }
1242.portfolio-projects--title {
1243 margin-top: 0.9375em;
1244 font-size: 20px; }
1245 @media screen and (min-width: 768px) {
1246 .portfolio-projects--title {
1247 margin-top: 0;
1248 font-size: 21px; }
1249 .portfolio-projects--desc {
1250 margin-top: 30px;
1251 margin-bottom: 30px;
1252 font-size: 16px; }
1253 .portfolio-projects--btn {font-size: 14px;margin:0 4px 16px 4px;}
1254 #portfolio > div > div > div:nth-child(1) > div > div.col-sm-5.text-center,
1255 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-7.text-center.pull-right-sm {padding-left:0;}
1256 #portfolio > div > div > div:nth-child(1) > div > div.col-sm-7.text-center,
1257 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm {padding-right: 0;} }
1258 @media screen and (min-width: 992px) {
1259 .portfolio-projects--title {
1260 margin-top: 15%;
1261 font-size: 30px; }
1262 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-left:-8px;}
1263 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(5) {margin-right:-8px;} }
1264 @media screen and (min-width: 1080px) {
1265 .portfolio-projects--title {
1266 margin-top: 24%;
1267 font-size: 21px; }
1268 }
1269 @media screen and (min-width: 1200px) {
1270 .portfolio-projects--title {
1271 margin-top: 24%;
1272 font-size: 24px; }
1273 .portfolio-projects--desc {
1274 margin-top: 30px;
1275 margin-bottom: 30px;
1276 font-size: 18px; }
1277 .portfolio-projects .col-lg-6 + .col-lg-6 + .col-lg-6 {margin-top:40px}
Karol Putrabac14db2017-09-02 18:16:57 +0200[diff] [blame]1278 .portfolio-projects--btn {font-size: 18px;} }
Henri Koivuneva87bdef32017-08-25 23:50:22 +0300[diff] [blame]1279 @media screen and (min-width: 1366px) {
1280 .portfolio-projects--title {margin-top:28%;}
1281 }
1282 @media (min-width: 1500px) {
1283 .portfolio-projects--title {font-size: 28px;margin-top:31%;}
1284 .portfolio-projects--btn {font-size: 21px}
1285 }
1286
1287#contact {
1288 background-color: #07374a;
1289 padding-left: 15px;
1290 padding-right: 15px }
1291 #contact h2 {
1292 color: #0080ff; }
1293
1294.contact-social-icons p {
1295 color: #0080ff; }
1296.contact-social-icons > ul {padding:0;margin:0 auto;}
1297.contact-social-icons ul a {
1298 color: #0080ff;
1299 list-style: none; }
1300 .contact-social-icons ul a:hover,
1301 .team-links-list a:hover,
1302 .family-links-list a:hover {
1303 color: #ffffff; }
1304 .contact-social-icons ul a:focus,
1305 .contact-social-icons ul a:active,
1306 .team-links-list a:focus,
1307 .team-links-list a:active,
1308 .family-links-list a:focus,
1309 .family-links-list a:active {
1310 color: rgba(255,255,255,0.8); }
1311 .contact-social-icons ul a li {
1312 display: inline-block;
1313 padding: 1.25%;
1314 font-size: 16px }
1315 @media (max-width: 1200px) {
1316 #family > div > div.row > div.center > div {margin:1.5em 4% 3em 4%;width:42%;float:left;}
1317 #family > div > div.row > div.center > div:last-child {margin-bottom: 0}
1318 }
1319 @media (max-width: 720px) {
1320 #family > div > div.row > div.center > div {margin:1.5em 4% 3em 4%;width:92%;}
1321 }
1322
1323.footer {
1324 padding-top: 1em;
1325 bottom: 0;
1326 width: 100%;
1327 /* Set the fixed height of the footer here */
1328 background-color: #052a38;
1329
1330 color: #ffffff; }
1331.footer-role, .footer-name, .footer-description {
1332 color: #FFFFFF;
1333}
1334.footer-description {
1335 color: #fff;
1336 font-size: 18px;
1337}
1338.footer-role h4, .footer-links-list a {
1339 color: #0080ff;
1340}
1341.footer-header h4 {
1342 color: #0080ff;
1343}
1344#scrollIcon, #scrollTopIcon {
1345 margin-top: 200px;
1346 padding: 10px;
1347 font-size: 1.5em;
1348 color: #07374a;
1349 border: solid 2px #07374a;
1350 border-radius: 50%; }
1351
1352#scrollTopIcon {
1353 margin-top: 10px;
1354 font-size: 1em;
1355 color: #ffffff;
1356 border-color: #ffffff; }
1357
1358.back-to-top {
1359 display: none; }
1360 .back-to-top.visible {
1361 display: block; }
1362
1363/* our team section */
1364#team, #family {
1365 background-color: #0080ff;
1366 /*font-weight: 700;
1367 font-size: 21px; */
1368}
1369.hr.invisible_hr {
1370 height: 0;
1371 padding: 0;
1372}
1373.hr.big_size_hr {
1374 margin: 30px 0;
1375}
1376.hr {
1377 clear: both;
1378 display: block;
1379 font-size: 0;
1380 height: 24px;
1381 margin: 20px 0;
1382 overflow: hidden;
1383 padding: 2px 0;
1384 position: relative;
1385 text-align: center;
1386 width: 100%;
1387}
1388.highlight_secondary {
1389 color: #FFFFFF;
1390}
1391.team-role, .team-name, .team-links-list a {
1392 color: #07374a;
1393 text-align: center;
1394 white-space: normal;
1395 width: 100%;
1396}
1397.team-name, .family-name {
1398 font-size: 21px;
1399 text-align: center;
1400 white-space: nowrap;
1401}
1402.team-links, .family-links {
1403 padding-top: .75em;
1404 color: #07374a;
1405 text-align: center;
1406}
1407.team-image img, .family-image img {
1408 max-width:150px;
1409 max-height: 150px;
1410 margin:0 auto;
1411}
1412#team > .container .row > div {
1413 min-height: 0px;
1414 padding-left: 0;
1415 padding-right: 0;
1416 /* display: flex; */
1417 /* flex-wrap: wrap; */
1418 /* justify-content: flex-start; */
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]1419}
1420 @media (min-width: 768px) {
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]1421 #team > .container .row > div {min-height: 0px;}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]1422 #team .col-sm-4 {
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]1423 width: 100%;
1424 margin: 0;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]1425 }
1426 }
1427 @media (min-width: 992px) {
1428 #team .col-md-2 {
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]1429 width: 100%;
1430 margin: 0;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]1431 }
1432 }
1433 @media (min-width: 1200px) {
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]1434 #team > .container .row > div {min-height: 0px;}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]1435 }
1436 @media (max-width: 700px) {
Henri Koivuneva5c411dd2017-08-25 22:59:59 +0300[diff] [blame]1437 #team > .container .row > div {min-height: 0px;}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]1438 #team .col-xs-6 {width: 42%;margin:4%;}
1439 }
1440 @media (max-width: 500px) {
1441 #team > .container .row > div {min-height: 250px;}
1442 #team .col-xs-6 {width: 92%;margin:4%;}
1443 }
1444#team > .container .row > .row, #team > .container {padding-left:0;padding-right: 0}
Henri Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]1445
Henri Koivunevad7a75622017-08-12 21:53:07 +0300[diff] [blame]1446/* Bliss family section */
Unknownc8b8ae72017-08-12 12:20:45 -0400[diff] [blame]1447#family {
Henri Koivunevad7a75622017-08-12 21:53:07 +0300[diff] [blame]1448 background-color: #07374a;
Unknownc8b8ae72017-08-12 12:20:45 -0400[diff] [blame]1449}
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]1450#family > div > div.row > div {font-size: 18px}
Henri Koivunevabef78a62017-08-12 22:32:07 +0300[diff] [blame]1451.family-role, .family-name, .family-description {
Unknownc8b8ae72017-08-12 12:20:45 -0400[diff] [blame]1452 color: #FFFFFF;
1453}
1454.family-description {
Henri Koivunevabef78a62017-08-12 22:32:07 +0300[diff] [blame]1455 color: #fff;
1456 font-size: 18px;
Unknownc8b8ae72017-08-12 12:20:45 -0400[diff] [blame]1457}
Henri Koivunevabef78a62017-08-12 22:32:07 +0300[diff] [blame]1458.family-role h4, .family-links-list a {
Unknownc8b8ae72017-08-12 12:20:45 -0400[diff] [blame]1459 color: #0080ff;
1460}
1461.family-header h2 {
1462 color: #0080ff;
1463}
Henri Koivuneva10864132017-08-12 22:35:45 +0300[diff] [blame]1464#family .about-tools {
1465 font-size: 20px;
1466}
Unknownc8b8ae72017-08-12 12:20:45 -0400[diff] [blame]1467.family-image img {
1468 max-width:150px;
1469 max-height: 150px;
1470 margin:0 auto;
Unknown1202cb92017-08-12 14:55:18 -0400[diff] [blame]1471}
1472.family-projects--btn {
1473 background: transparent;
1474 color: #0080ff;
1475 border: 1px solid #0080ff;
1476 border-radius: 5px;
1477 margin-bottom: 1.25em;
1478 font-weight: 700;
Henri Koivuneva5e8fc3b2017-08-13 01:59:45 +0300[diff] [blame]1479 font-size: 21px; }
Unknown1202cb92017-08-12 14:55:18 -0400[diff] [blame]1480 .family-projects--btn:hover {
1481 background: #0080ff;
1482 color: #ffffff; }
1483 .family-projects--btn:focus,
1484 .family-projects--btn:active {
1485 background: #0080ff;
Henri Koivunevaac37dfe2017-08-12 22:39:22 +0300[diff] [blame]1486 color: #ffffff; }
Henri Koivunevad7a75622017-08-12 21:53:07 +0300[diff] [blame]1487
Henri Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]1488@media (max-height: 880px) {
1489 #scrollIcon, #scrollTopIcon {margin-top: 15vh}
1490}
1491@media (max-height: 800px) {
1492 #scrollIcon, #scrollTopIcon {margin-top: 10vh}
1493 .cover.top {padding: 7.5vh 0 12.5vh 0;}
1494}
1495@media (max-height: 750px) {
1496 #scrollIcon, #scrollTopIcon {margin-top: 8vh}
1497}
1498@media (max-height: 720px) {
1499 #scrollIcon, #scrollTopIcon {margin-top: 5vh}
1500 .cover.top {padding: 5vh 0 10vh 0;}
1501}
1502@media (max-height: 650px) {
1503 #scrollIcon, #scrollTopIcon {margin-top: 5vh}
1504 .cover.top {padding: 2.5vh 0 5vh 0;}
1505 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 42vh;}
1506}
1507@media (max-height: 550px) {
1508 #scrollIcon, #scrollTopIcon {margin-top: 5vh}
1509 .cover.top {padding: 1.5vh 0 3vh 0;}
1510 .headline {padding-top:3vh;}
1511 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
1512}
1513@media (max-height: 480px) {
1514 #scrollIcon, #scrollTopIcon {margin-top: 0}
Henri Koivuneva71d10752017-08-12 18:37:49 +0300[diff] [blame]1515 .cover.top {padding: 3vh 0 3vh 0;}
Henri Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]1516 .headline {padding-top:1.5vh;}
1517 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 32vh;}
1518}
Henri Koivuneva71d10752017-08-12 18:37:49 +0300[diff] [blame]1519@media (max-height: 320px) {
1520 .cover.top {padding: 1vh 0 3vh 0;}
1521 .headline {padding-top:1vh;}
1522 body > div.container-fluid > div.row.cover.top > div > .row > .headline > img {max-height: 25vh;}
1523}
Henri Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]1524@media (max-width: 768px) {
1525 .container-fluid {padding:30px 0 !important;}
1526 .h1, .h2, .h3, h1, h2, h3 {
1527 margin-top: 10px;
1528 margin-bottom: 10px;
1529 }
1530 .lead, .about, .about-info, .about-tools, .about-last {font-size: 16px}
Henri Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]1531 .row.cover.top .lead {
1532 max-width: 350px;
1533 margin-left:auto;
1534 margin-right: auto
1535 }
1536 .h4, h4 {font-size: 20px}
1537 #portfolio h2 {padding-bottom: 0}
Henri Koivuneva82de7722017-08-13 02:11:30 +0300[diff] [blame]1538 #portfolio > .container {padding-right: 0;padding-left: 0}
1539 .portfolio-projects--btn {margin-top:1.25em;margin-left: auto;margin-right: auto}
1540 #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-right: 4px}
1541 #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 Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]1542 #scrollIcon, #scrollTopIcon {font-size: 1em}
1543}
Henri Koivuneva936cb392017-08-12 18:49:20 +0300[diff] [blame]1544@media (max-device-height: 480px) and (orientation: landscape) {
1545 .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
1546 max-height: 240px;
1547 }
1548 .navbar-nav>li>a {
1549 padding-top: 6px;
1550 padding-bottom: 6px;
1551 }
1552}
Henri Koivuneva0752d232017-08-12 18:08:32 +0300[diff] [blame]1553@media (max-width: 360px) {
1554 .h1, h1 {font-size: 32px;}
Henri Koivuneva82de7722017-08-13 02:11:30 +0300[diff] [blame]1555 .cover, .cover.bottom {
1556 padding-left: 15px;
1557 padding-right: 15px;
1558 }
Henri Koivunevad7a75622017-08-12 21:53:07 +0300[diff] [blame]1559}
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1560
1561/* --- Mock-up Setting --- */
1562/* Paste link to your image 310x550px */
1563/* Screen Setting */
1564/* --- --- */
1565/* --- Animation Setting --- */
1566/* --- --- */
1567
1568h1 {
1569 color: #fff;
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1570 cursor: default;
1571}
1572
1573h1 span:nth-of-type(1) {
1574 font-size: 1em;
1575 line-height: 0.5em;
1576}
1577h1 span:nth-of-type(2) {
1578 font-size: .4em;
1579 font-weight: 400;
1580 line-height: 3.65em;
1581 color: #0080ff;
1582 background-color: #282828;
1583 padding: 3px 10px;
1584 box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.6);
1585}
1586h1 span:nth-of-type(3) {
1587 font-size: 1.5em;
1588 line-height: .85em;
1589}
1590
1591.space {
1592 will-change: transform;
1593 position: relative;
Unknown0c3ad6b2017-08-13 23:21:16 -0400[diff] [blame]1594 left:-25;
1595 top:auto;
1596 bottom:auto;
Unknowna3fe6cb2017-08-13 22:41:36 -0400[diff] [blame]1597 margin-top:15%;
Unknownccfaea72017-08-13 20:33:17 -0400[diff] [blame]1598 margin-bottom:25%;
Unknown0c3ad6b2017-08-13 23:21:16 -0400[diff] [blame]1599 margin-left: 35%;
Unknownb6003852017-08-13 20:25:42 -0400[diff] [blame]1600 margin-right: auto
Unknown0c3ad6b2017-08-13 23:21:16 -0400[diff] [blame]1601 -webkit-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
1602 transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.90);
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1603 -webkit-transition: all 600ms;
1604 transition: all 600ms;
1605}
1606
1607.space-hover {
Unknown0c3ad6b2017-08-13 23:21:16 -0400[diff] [blame]1608 position: relative;
1609 left:-25;
1610 top:auto;
1611 bottom:auto;
1612 margin-top:30%;
Unknowna3fe6cb2017-08-13 22:41:36 -0400[diff] [blame]1613 margin-bottom:25%;
Unknown0c3ad6b2017-08-13 23:21:16 -0400[diff] [blame]1614 margin-left: 45%;
Unknowna3fe6cb2017-08-13 22:41:36 -0400[diff] [blame]1615 margin-right: auto
Unknown0c3ad6b2017-08-13 23:21:16 -0400[diff] [blame]1616 -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
1617 transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.90);
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1618}
1619
1620.phone-container {
Unknownb5f96402017-08-13 20:14:52 -0400[diff] [blame]1621 width: 11.2em;
1622 height: 23.33em;
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1623 position: absolute;
1624 top: 0;
1625 bottom: 0;
1626 left: 0;
1627 right: 0;
1628 margin: auto;
1629 -webkit-transform-style: preserve-3d;
1630 transform-style: preserve-3d;
1631 -webkit-transform: translateX(-80%);
1632 transform: translateX(-80%);
Unknownb5f96402017-08-13 20:14:52 -0400[diff] [blame]1633 border-radius: 2.0em;
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1634}
1635
1636.phone-front {
1637 will-change: transform;
Unknownb5f96402017-08-13 20:14:52 -0400[diff] [blame]1638 width: 11.2em;
1639 height: 23.33em;
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1640 position: absolute;
1641 top: 0;
1642 bottom: 0;
1643 left: 0;
1644 right: 0;
1645 margin: auto;
Unknown001b4092017-08-13 20:55:51 -0400[diff] [blame]1646 background-image: url("../images/phone_front.svg");
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1647 background-repeat: no-repeat;
Unknownb5f96402017-08-13 20:14:52 -0400[diff] [blame]1648 background-position: -.53em 0;
1649 background-size: 12.3em 23.36em;
1650 border-radius: 2.0em;
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1651 box-shadow: -20px 27px 13px 10px rgba(0, 0, 0, 0.5);
1652 -webkit-transition: -webkit-transform 600ms;
1653 transition: -webkit-transform 600ms;
1654 transition: transform 600ms;
1655 transition: transform 600ms, -webkit-transform 600ms;
1656 -webkit-transition: box-shadow 450ms;
1657 transition: box-shadow 450ms;
1658}
1659
Unknownb4169622017-08-15 19:11:36 -0400[diff] [blame]1660.just-phone-front {
1661 will-change: transform;
1662 width: 11.2em;
1663 height: 23.33em;
1664 position: absolute;
1665 right: 0;
1666 margin: auto;
1667 left:-25;
1668 top:0;
1669 bottom:auto;
1670 margin-top:10%;
1671 margin-bottom:15%;
1672 margin-left: 35%;
1673 margin-right: auto;
1674 background-image: url("../images/phone_front.svg");
1675 background-repeat: no-repeat;
1676 background-position: -.53em 0;
1677 background-size: 12.3em 23.36em;
1678 border-radius: 2.0em;
1679 box-shadow: -10px 13px 7px 5px rgba(0, 0, 0, 0.5);
1680 -webkit-transform: scale(0.90);
1681 transform: scale(0.90);
1682 -webkit-transition: -webkit-transform 600ms;
1683 transition: -webkit-transform 600ms;
1684 transition: transform 600ms;
1685 transition: transform 600ms, -webkit-transform 600ms;
1686 -webkit-transition: box-shadow 450ms;
1687 transition: box-shadow 450ms;
1688}
1689
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1690.phone-front-hover {
1691 box-shadow: 0 12px 13px 10px rgba(0, 0, 0, 0.5);
1692 -webkit-transition: -webkit-transform 600ms;
1693 transition: -webkit-transform 600ms;
1694 transition: transform 600ms;
1695 transition: transform 600ms, -webkit-transform 600ms;
1696 -webkit-transition: box-shadow 450ms;
1697 transition: box-shadow 450ms;
1698}
1699
1700.phone-screen {
Unknownf97e9ae2017-08-13 21:03:37 -0400[diff] [blame]1701 width: 10.5em;
1702 height: 19.3em;
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1703 position: relative;
1704 left: 0;
1705 right: 0;
Unknownb5f96402017-08-13 20:14:52 -0400[diff] [blame]1706 top: 2.283em;
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1707 margin: auto;
1708 background-color: #000;
1709 overflow: hidden;
1710}
1711.phone-screen::before {
1712 content: "";
1713 position: absolute;
1714 width: 100%;
1715 height: 100%;
1716 box-shadow: inset 13px 0 10px -5px rgba(250, 250, 250, 0.17), inset -13px 0 10px -5px rgba(250, 250, 250, 0.17);
1717 background-image: url("../images/bliss_screens.gif");
1718 background-repeat: no-repeat;
1719 background-position: 50% 0px;
1720 background-size: cover;
1721 -webkit-transform: scale(1);
1722 transform: scale(1);
1723}
1724.phone-screen::after {
1725 content: "";
1726 position: absolute;
1727 width: 100%;
1728 height: 100%;
1729 background-color: rgba(250, 250, 250, 0.1);
1730}
1731
1732.phone-side {
1733 will-change: transform;
Unknownb5f96402017-08-13 20:14:52 -0400[diff] [blame]1734 width: 13.33em;
1735 height: 25em;
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1736 position: absolute;
1737 top: 0;
1738 bottom: 0;
1739 left: 0;
1740 right: 0;
1741 margin: auto;
Unknownb5f96402017-08-13 20:14:52 -0400[diff] [blame]1742 border-radius: 1.66em;
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1743 background-repeat: no-repeat;
Unknownb5f96402017-08-13 20:14:52 -0400[diff] [blame]1744 background-position: 2.2em .5em;
1745 background-size: 13.33em 24.73em;
Unknown2175d332017-08-13 19:28:40 -0400[diff] [blame]1746 -webkit-transform-style: preserve-3d;
1747 transform-style: preserve-3d;
1748 -webkit-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
1749 transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
1750 -webkit-transition: all 350ms;
1751 transition: all 350ms;
1752}
1753
1754.phone-side-hover {
1755 -webkit-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
1756 transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
1757 -webkit-transition: all 350ms;
1758 transition: all 350ms;
1759}
1760
1761@-webkit-keyframes figure-anim {
1762 from {
1763 border-radius: 50%;
1764 -webkit-transform: rotate(0deg) scale(1);
1765 transform: rotate(0deg) scale(1);
1766 }
1767 to {
1768 border-radius: 30%;
1769 -webkit-transform: rotate(360deg) scale(0.5);
1770 transform: rotate(360deg) scale(0.5);
1771 }
1772}
1773
1774@keyframes figure-anim {
1775 from {
1776 border-radius: 50%;
1777 -webkit-transform: rotate(0deg) scale(1);
1778 transform: rotate(0deg) scale(1);
1779 }
1780 to {
1781 border-radius: 30%;
1782 -webkit-transform: rotate(360deg) scale(0.5);
1783 transform: rotate(360deg) scale(0.5);
1784 }
1785}
1786@-webkit-keyframes figure-container-anim {
1787 from {
1788 -webkit-transform: rotate(0deg);
1789 transform: rotate(0deg);
1790 }
1791 to {
1792 -webkit-transform: rotate(360deg);
1793 transform: rotate(360deg);
1794 }
1795}
1796@keyframes figure-container-anim {
1797 from {
1798 -webkit-transform: rotate(0deg);
1799 transform: rotate(0deg);
1800 }
1801 to {
1802 -webkit-transform: rotate(360deg);
1803 transform: rotate(360deg);
1804 }
1805}