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