1
html {
2
    box-sizing: border-box;
3
    font-family: "Exo 2";
4
}
5
@font-face {
6
    font-family: "Exo 2";
7
    src: url("../font/exo2/Exo2-Regular.ttf");
8
    font-size: 13pt;
9
}
10
*,
11
*:before,
12
*:after {
13
    box-sizing: inherit;
14
    margin: 0;
15
    padding: 0;
16
}
17
#name {
18
    font-size: 40px;
19
    padding: 15px;
20
}
21
body {
22
    overflow: hidden;
23
}
24
h3 {
25
    color: #b0d138;
26
}
27
p {
28
    font-family: "Exo 2";
29
    text-align: justify;
30
    text-justify: inter-word;
31
    color: #2a2a2d;
32
}
33

34
@keyframes typing {
35
    from {
36
        width: 0;
37
    }
38
}
39

40
@keyframes caret {
41
    50% {
42
        border-right-color: transparent;
43
    }
44
}
45

46
h3 {
47
    font-family: "Exo 2";
48
    text-transform: uppercase;
49
    margin-top: 3%;
50
    font-size: 15px;
51
    font-weight: bold;
52
    letter-spacing: 1px;
53
    width: 26ch;
54
    white-space: nowrap;
55
    overflow: hidden;
56
    animation: typing 4s steps(23);
57
}
58
img {
59
    max-width: 100%;
60
    padding: 10px;
61
}
62
.wrapper-img {
63
    cursor: pointer;
64
    height: auto;
65
    box-align: left;
66
    padding-right: 10px;
67
    margin-top: 10%;
68
    margin-bottom: 10%;
69
    position: relative;
70
    width: 250px;
71
}
72
.fa-solid {
73
    color: #ffffff;
74
}
75
.wrapper-img .img-hide {
76
    height: auto;
77
    box-align: left;
78
    padding-right: 10px;
79
    margin-bottom: 10%;
80
    position: relative;
81
    width: 250px;
82
    opacity: 0;
83
}
84
.wrapper-img:hover .img-hide {
85
    opacity: 1;
86
    position: absolute;
87
    top: 0;
88
    left: 0;
89
    transition: all 0.5s ease-in-out;
90
}
91

92
.logo {
93
    width: 100px;
94
    height: 100px;
95
    /* transition: all is ease-in-out; */
96
    padding-right: 20px;
97
}
98
.container {
99
    height: 100vh;
100
    z-index: 2;
101
    display: -webkit-box;
102
    display: -webkit-flex;
103
    display: -ms-flexbox;
104
    display: flex;
105
    -webkit-box-pack: end;
106
    -webkit-justify-content: flex-end;
107
    -ms-flex-pack: end;
108
    justify-content: flex-end;
109
    position: absolute;
110
    top: 0;
111
    bottom: 0;
112
    left: 0;
113
    right: 0;
114
    margin: auto;
115
    width: 80%;
116
    height: 80%;
117
    background-color: rgba(43, 43, 43, 0);
118
    /* box-shadow: 0 0 50px 0 rgba(8, 146, 208, 0.7); */
119
    z-index: 1;
120
    overflow: hidden;
121
}
122
.box__row-cell {
123
    position: absolute;
124
    top: 20%;
125
    left: 35%;
126
    width: 25%;
127
    height: 30%;
128
    background-color: rgba(87, 87, 87, 0.1);
129
    -webkit-transform: translateZ(0);
130
    transform: translateZ(0);
131
    -webkit-transition: all 400ms 600ms, width 300ms 300ms, background-color 300ms 600ms;
132
    transition: all 400ms 600ms, width 300ms 300ms, background-color 300ms 600ms;
133
    cursor: pointer;
134
    /* box-shadow: 0 0 50px 0 rgba(8, 146, 208, 0.7); */
135
    overflow: hidden;
136
    z-index: 2;
137
}
138
.box__row-cell:after {
139
    content: "";
140
    position: absolute;
141
    top: 0;
142
    left: 0;
143
    width: 100%;
144
    height: 100%;
145
    background-color: rgba(0, 0, 0, 0.1);
146
    opacity: 0;
147
    -webkit-transition: 500ms;
148
    transition: 500ms;
149
}
150
.box__row-cell:before {
151
    content: "";
152
    position: absolute;
153
    top: -5%;
154
    left: -5%;
155
    width: 110%;
156
    height: 110%;
157
    background-color: transparent;
158
    opacity: 1;
159
    -webkit-transition: 300ms;
160
    transition: 300ms;
161
    z-index: -3;
162
}
163
.box__row-cell:hover:before {
164
    background-color: #575757;
165
}
166
.box__row-cell-info {
167
    margin-left: 20px;
168
    margin-top: 15px;
169
    width: 200px;
170
    color: #0892d0;
171
    -webkit-transition: 400ms 850ms;
172
    transition: 400ms 850ms;
173
}
174
.box__row-cell-info-ep {
175
    margin-top: 25px;
176
    font-size: 10px;
177
}
178
.box__row-cell-info-ep span {
179
    padding-left: 10px;
180
}
181
@media screen and (max-height: 915px) {
182
    .box__row-cell-info-ep {
183
        margin-top: 10px;
184
    }
185
}
186
.box__row-cell-info-title {
187
    letter-spacing: 2px;
188
    margin-top: 15px;
189
    font-size: 20px;
190
    color: #f6f930;
191
}
192
@media screen and (max-height: 692px) {
193
    .box__row-cell-info-title {
194
        margin-top: 8px;
195
        font-size: 18px;
196
    }
197
}
198
@media screen and (max-height: 692px) {
199
    .box__row-cell-info-title {
200
        font-size: 20px;
201
        margin-top: 4px;
202
    }
203
}
204
.box__row-cell-info-sign {
205
    margin: 15px 0 0 2px;
206
    height: 3px;
207
    width: 20px;
208
    background-color: #0892d0;
209

210
    border-radius: 1px;
211
    -webkit-transition: 200ms;
212
    transition: 200ms;
213
    z-index: 10;
214
}
215
@media screen and (max-height: 800px) {
216
    .box__row-cell-info-sign {
217
        margin-top: 10px;
218
    }
219
}
220
.box__row-cell-info--time {
221
    position: absolute;
222
    bottom: 18px;
223
    font-size: 10px;
224
}
225
@media screen and (max-height: 650px) {
226
    .box__row-cell-info--time {
227
        right: 20px;
228
        text-align: right;
229
    }
230
}
231
.box__row-cell-info--full {
232
    -webkit-transform: translateX(-50px);
233
    transform: translateX(-50px);
234
    opacity: 0;
235
    margin: 50px 40px 90px;
236
    -webkit-transition: 300ms;
237
    transition: 300ms;
238
}
239
.box__row-cell-info--full-heading {
240
    line-height: 30px;
241
    color: #f6f930;
242
    font-size: 30px;
243
    font-weight: 900;
244
    letter-spacing: 3px;
245
}
246
.box__row-cell-info--full-par {
247
    padding-top: 50px;
248
    color: #fff;
249
}
250
.box__row-cell:nth-child(2) {
251
    left: 65%;
252
}
253
.box__row-cell:nth-child(3) {
254
    left: 100%;
255
}
256
.box__row:nth-child(2) .box__row-cell {
257
    top: 55%;
258
}
259
.box__row:nth-child(3) .box__row-cell {
260
    top: 100%;
261
}
262
.box__content {
263
    position: absolute;
264
    width: 100%;
265
    height: 100%;
266
    left: 0;
267
    background-image: linear-gradient(#0f0f0f, #292929);
268
    -webkit-transform: translateZ(0);
269
    transform: translateZ(0);
270
    opacity: 0;
271
    z-index: -10;
272
    -webkit-transition: all 400ms 600ms, z-index 0ms 0ms;
273
    transition: all 400ms 600ms, z-index 0ms 0ms;
274
}
275
.box__content-wrapper {
276
    position: relative;
277
    margin-left: auto;
278
    width: 72%;
279
    height: 100%;
280
    overflow: hidden;
281
}
282
.box__content-inner {
283
    position: absolute;
284
    left: 18px;
285
    -webkit-transform: translateX(50px);
286
    transform: translateX(50px);
287
    width: 100%;
288
    height: 100%;
289
    overflow: auto;
290
    opacity: 0;
291
    -webkit-transition: 400ms, opacity 200ms;
292
    transition: 400ms, opacity 200ms;
293
}
294
.box__content-text {
295
    padding: 20px 0 30px 8px;
296
    max-width: 100%;
297
    color: #e8e8e8;
298
}
299
.box__content-text-heading {
300
    position: relative;
301
    margin: 40px 0 20px;
302
    color: #e8e8e8;
303
    font-size: 20px;
304
    letter-spacing: 2px;
305
    width: auto;
306
}
307
.box__content-text-heading:after {
308
    content: "";
309
    position: absolute;
310
    top: -15px;
311
    left: 0;
312
    width: 20px;
313
    height: 2px;
314
    background-color: #4f4f4f;
315
    box-shadow: 0 0 1px 0 #4f4f4f;
316
}
317
.box__content-text-par {
318
    width: 90%;
319
    line-height: 22px;
320
    padding-bottom: 10px;
321
    font-size: 16px;
322
    color: #cfcfcf;
323
}
324
.box__content-text-list {
325
    list-style-type: none;
326
}
327
.box__content-text-item {
328
    padding-bottom: 3px;
329
    font-size: 14px;
330
}
331
.box__content-text-link {
332
    text-decoration: none;
333
    color: #2a2a2d;
334
    font-size: 14px;
335
}
336
.box__content-text-link:hover {
337
    text-decoration: underline;
338
}
339
.box__close {
340
    position: absolute;
341
    top: 50px;
342
    left: 50px;
343
    height: 20px;
344
    width: 20px;
345
    font-size: 0;
346
    cursor: pointer;
347
    z-index: 9999;
348
}
349
.box__close:after,
350
.box__close:before {
351
    content: "";
352
    position: absolute;
353
    top: 9px;
354
    left: -14px;
355
    -webkit-transform: rotate(45deg);
356
    transform: rotate(45deg);
357
    width: 35px;
358
    height: 2px;
359
    background-color: #fff;
360
    opacity: 0;
361
    -webkit-transition: 500ms;
362
    transition: 500ms;
363
}
364
.box__close:before {
365
    -webkit-transform: rotate(-45deg);
366
    transform: rotate(-45deg);
367
}
368
.box__close span {
369
    position: relative;
370
    display: inline-block;
371
    margin: 1px;
372
    width: 4px;
373
    height: 4px;
374
    border-radius: 50%;
375
    background-color: #fff;
376
    -webkit-transition: 400ms 500ms;
377
    transition: 400ms 500ms;
378
}
379
.box__close span:nth-child(6) {
380
    right: 6px;
381
}
382
.box__close span:nth-child(7) {
383
    right: 6px;
384
}
385
.box__close span:nth-child(8) {
386
    right: 6px;
387
}
388
.box__close span:nth-child(9) {
389
    right: 6px;
390
}
391
.box__close span:nth-child(10) {
392
    right: 6px;
393
}
394
.box__title {
395
    position: absolute;
396
    top: 15%;
397
    left: 5%;
398
}
399
.box__title-heading {
400
    position: relative;
401
    color: #0892d0;
402
    letter-spacing: 3px;
403
    line-height: 25px;
404
    font-size: 25px;
405
}
406
.box__title-heading:after {
407
    position: absolute;
408
    top: 170px;
409
    left: 0;
410
    width: 20px;
411
    height: 2px;
412
    box-shadow: 0 0 1px 0 #000;
413
    background-color: #000;
414
}
415
.box__title-heading span {
416
    letter-spacing: 6px;
417
    color: #f6f930;
418
}
419
.box__title-par {
420
    text-transform: uppercase;
421
    margin-top: 3%;
422
    color: #0892d0;
423
    font-size: 10px;
424
    font-weight: bold;
425
    letter-spacing: 6px;
426
}
427
.active {
428
    left: 0 !important;
429
    top: 0 !important;
430
    height: 100%;
431
    width: 25%;
432
    background-color: #5c5c5c;
433
    z-index: 5;
434
    -webkit-transition: all 400ms 400ms, width 300ms 800ms;
435
    transition: all 400ms 400ms, width 300ms 800ms;
436
    cursor: default;
437
    opacity: 1 !important;
438
}
439
.active .box__row-cell-info:nth-child(1) {
440
    -webkit-transform: translateX(50px);
441
    transform: translateX(50px);
442
    opacity: 0;
443
    -webkit-transition: 300ms 0ms ease-in, opacity 375ms 0ms;
444
    transition: 300ms 0ms ease-in, opacity 375ms 0ms;
445
}
446
.active .box__row-cell-info:nth-child(2) {
447
    -webkit-transform: translateX(50px);
448
    transform: translateX(50px);
449
    opacity: 0;
450
    -webkit-transition: 300ms 50ms ease-in, opacity 375ms 50ms;
451
    transition: 300ms 50ms ease-in, opacity 375ms 50ms;
452
}
453
.active .box__row-cell-info:nth-child(3) {
454
    -webkit-transform: translateX(50px);
455
    transform: translateX(50px);
456
    opacity: 0;
457
    -webkit-transition: 300ms 100ms ease-in, opacity 375ms 100ms;
458
    transition: 300ms 100ms ease-in, opacity 375ms 100ms;
459
}
460
.active .box__row-cell-info:nth-child(4) {
461
    -webkit-transform: translateX(50px);
462
    transform: translateX(50px);
463
    opacity: 0;
464
    -webkit-transition: 300ms 150ms ease-in, opacity 375ms 150ms;
465
    transition: 300ms 150ms ease-in, opacity 375ms 150ms;
466
}
467
.active .box__row-cell-info--full {
468
    -webkit-transform: translateX(0);
469
    transform: translateX(0);
470
    opacity: 1;
471
    -webkit-transition: 300ms 900ms;
472
    transition: 300ms 900ms;
473
}
474
.cell-fade {
475
    opacity: 0;
476
    -webkit-transition: all 400ms 400ms, width 300ms 800ms, opacity 200ms 300ms;
477
    transition: all 400ms 400ms, width 300ms 800ms, opacity 200ms 300ms;
478
}
479
.hover-cell:after {
480
    opacity: 1;
481
}
482
.show-content {
483
    opacity: 1;
484
    z-index: 2;
485
    -webkit-transition: all 300ms 400ms, z-index 0ms 0ms;
486
    transition: all 300ms 400ms, z-index 0ms 0ms;
487
}
488
.show-content .box__content-inner {
489
    -webkit-transform: translateX(0);
490
    transform: translateX(0);
491
    opacity: 1;
492
    -webkit-transition: 300ms 1100ms;
493
    transition: 300ms 1100ms;
494
}
495
.box-close-active:after,
496
.box-close-active:before {
497
    opacity: 1;
498
    -webkit-transform: rotate(135deg);
499
    transform: rotate(135deg);
500
    -webkit-transition: 500ms 800ms;
501
    transition: 500ms 800ms;
502
}
503
.box-close-active:before {
504
    -webkit-transform: rotate(45deg);
505
    transform: rotate(45deg);
506
}
507
.box-close-active span {
508
    opacity: 0;
509
    -webkit-transition: 0ms 800ms;
510
    transition: 0ms 800ms;
511
}
512
/* Grig portfolio gallery  */
513
.css_grid_gallery {
514
    display: grid;
515
    padding: 1rem;
516
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
517
    grid-gap: 1rem;
518
}
519
.css_grid_gallery img {
520
    display: inline-block;
521
    width: 100%;
522
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.75);
523
    cursor: pointer;
524
}
525
svg {
526
    width: 25px;
527
    height: 25px;
528
    fill: #0892d0;
529
    transition: all is ease-in-out;
530
}
531
a.svg {
532
    position: relative;
533
    display: inline-block;
534
    padding-left: 2px;
535
    padding-right: 2px;
536
}
537
a.svg:after {
538
    content: "";
539
    cursor: pointer;
540
    position: absolute;
541
    top: 0;
542
    right: 0;
543
    bottom: 0;
544
    left: 0;
545
}
546
.copyright {
547
    color: #0892d0;
548
    float: right-bottom;
549
    position: absolute;
550
    display: block;
551
    padding-right: 35%;
552
    -webkit-margin-before: 1em;
553
    -webkit-margin-after: 1em;
554
    -webkit-margin-start: 0;
555
    -webkit-margin-end: 0;
556
    top: 90%;
557
}
558
.copyright p {
559
    color: #ffffff;
560
}
561
#particles-js {
562
    position: fixed;
563
    top: 0;
564
    left: 0;
565
    width: 100%;
566
    height: 100%;
567
    background-image: linear-gradient(#000000, #121212);
568
    background-size: cover;
569
    z-index: 1;
570
}
571
#page-wrapper {
572
    position: relative;
573
    z-index: 2;
574
}
575