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