1  // font face imports
  2  @font-face {
  3    font-family: 'Bebas Neue Regular';
  4    src: url('./fonts/bebas-neue-regular.eot');
  5    src: url('./fonts/bebas-neue-regular.eot?#iefix') format('embedded-opentype'),
  6      url('./fonts/bebas-neue-regular.woff') format('woff'),
  7      url('./fonts/bebas-neue-regular.ttf') format('truetype'),
  8      url('./fonts/bebas-neue-regular.svg#bebas_neue_regularregular') format('svg');
  9    font-weight: normal;
 10    font-style: normal;
 11  }
 12  
 13  // Generic rules
 14  body {
 15    font-family: 'Bebas Neue Regular';
 16    background-color: #0b133b;
 17    color: #fff;
 18  }
 19  
 20  a { color: inherit; } 
 21  
 22  p.content{
 23    font-family: 'Roboto Mono';
 24    font-style: normal;
 25    font-weight: normal;
 26    line-height: 23px;
 27    z-index: 100;
 28    font-size: 15px;
 29    letter-spacing: -0.03em;
 30    color: rgba(255, 255, 255, 0.7);
 31  }
 32  
 33  section{
 34    min-height: 60vh;
 35    padding: 50px 0;
 36  }
 37  
 38  // helper classes
 39  .bt{
 40    border-top: 1px solid #D4434A;
 41  }
 42  
 43  .bb{
 44    border-bottom: 1px solid #D4434A;
 45  }
 46  
 47  .mb20{
 48    margin-bottom: 20px;
 49  }
 50  
 51  .mt50{
 52    margin-top: 50px;
 53  }
 54  
 55  .mt100{
 56    margin-top: 100px;
 57  }
 58  
 59  .mb50{
 60    margin-bottom: 50px;
 61  }
 62  
 63  .mb100{
 64    margin-bottom: 100px;
 65  }
 66  
 67  .mb150{
 68    margin-bottom: 150px;
 69  }
 70  
 71  .mtph{
 72    margin-top: 100vh;
 73  }
 74  
 75  .btn{
 76    border-radius: 0;
 77    letter-spacing: 0.1em;
 78  }
 79  
 80  .btt{
 81    z-index: 10;
 82  }
 83  
 84  .vc{
 85    display: flex;
 86    align-items: center;
 87    justify-content: center;
 88  }
 89  
 90  .btn-primary{
 91    background-color: #3830CF;
 92    border: none;
 93  }
 94  
 95  .btn-custom{
 96    background: rgba(56, 48, 207, 0.15);
 97    border: 1px solid rgba(56, 48, 207, 0.5);
 98    box-sizing: border-box;
 99    color: #fff;
100  }
101  
102  
103  // modal styling
104  
105  .modal-header{
106    background-color: #1C2449;
107    padding: 100px 100px 40px 100px;
108    border-top-left-radius: 0rem;
109    border-top-right-radius: 0rem;
110  }
111  
112  .modal-body{
113    padding: 40px 100px 40px 100px;
114    color:#1C2449;
115  }
116  
117  .modal-title{
118    line-height: normal;
119    font-size: 40px;
120    font-weight: bold;
121    margin-bottom: 10px;
122    letter-spacing: 0.1em;
123  }
124  
125  .modal-subtitle{
126    line-height: normal;
127    font-size: 24px;
128    letter-spacing: 0.1em;
129    opacity: 0.8;
130  }
131  
132  .modal-tag{
133    line-height: normal;
134    font-size: 17px;
135    letter-spacing: 0.1em;
136    opacity: 0.6;
137  }
138  
139  .modal-footer{
140    padding: 60px 100px 70px 100px;
141    background-color: #E6E7ED;
142    justify-content: start;
143    color:#1C2449;
144  }
145  
146  .modal-footer h2{
147    line-height: normal;
148    font-weight: bold;
149    font-size: 40px;
150    letter-spacing: 0.1em;
151    opacity: 0.8;
152    margin-bottom: 20px;
153    border-radius: 5px;
154  }
155  
156  .modal-subtitle .source{
157    font-family: 'Roboto Mono';
158    font-style: normal;
159    font-weight: normal;
160    line-height: 23px;
161    z-index: 100;
162    font-size: 12px;
163    letter-spacing: -0.03em;
164  }
165  
166  .modal-customcontent{
167    font-family: 'Roboto Mono';
168    font-style: normal;
169    font-weight: normal;
170    line-height: 23px;
171    z-index: 100;
172    font-size: 12px;
173    letter-spacing: -0.03em;
174  }
175  
176  .modal-body ol{
177    margin-top: 0;
178    padding-left: 1.3rem;
179    font-family: 'Roboto Mono';
180    font-style: normal;
181    font-weight: normal;
182    line-height: 23px;
183    z-index: 100;
184    font-size: 12px;
185    letter-spacing: -0.03em;
186  }
187  
188  .modal-body a:link{
189    color: #0056b3 !important;
190  }
191  
192  .link {
193    color: #0056b3 !important; 
194  }
195  
196  ol.root{
197    margin-left: -1.30rem;
198  }
199  
200  ol.root>li{
201    margin-bottom: 20px;
202  }
203  
204  ol li:before {
205      font-weight: 400;
206  }
207  
208  .modal-header .modal-customcontent{
209    font-family: 'Roboto Mono';
210    font-style: normal;
211    font-weight: 300;
212    color: rgba(255, 255, 255, 0.8);
213    line-height: 23px;
214    font-size: 13px;
215    letter-spacing: -0.01em;
216  }
217  
218  .modal-body .modal-customcontent{
219    margin-bottom: 0;
220    font-weight: 300;
221    letter-spacing: -0.04em;
222  }
223  
224  
225  .modal-header1{
226    background-image: url("../img/001.png");
227    background-position: 2em 2em;
228    background-repeat: no-repeat;
229  }
230  
231  .modal-header2{
232    background-image: url("../img/002.png");
233    background-position: 2em 2em;
234    background-repeat: no-repeat;
235  }
236  
237  // Navbar
238  .navbar{
239      padding-top: 30px;
240  }
241  
242  .navbar-brand img{
243    width: 123px;
244  }
245  
246  .navbar-nav .nav-link {
247      margin-left: 30px;
248      line-height: normal;
249      font-size: 17px;
250      cursor: pointer;
251      text-align: center;
252      letter-spacing: 0.08em;
253      color: #E5E5E5;
254      text-shadow: 0px 0px 11px rgba(0, 0, 0, 1);
255  }
256  
257  // Landing section
258  header{
259    min-height: 100vh;
260    align-items: center;
261    justify-content: center;
262    position: fixed;
263    top: 0;
264    left: 50%;
265    transform: translate(-50%, 0);
266    display: flex;
267    -webkit-transition: all 0.5s ease;
268    -moz-transition: all 0.5s ease;
269    -o-transition: all 0.5s ease;
270    transition: all 0.5s ease;
271  }
272  
273  .wrapper{
274    background-image: url("/img/bg-image.jpg");
275    background-repeat: no-repeat;
276    background-position: top right;
277    background-attachment: fixed;
278    width: 100vw;
279    height: 100vh;
280    position: fixed;
281    top: 0;
282    left: 0;
283    z-index: -2;
284  }
285  
286  .wrapper.hide {
287    -webkit-mask: url(../img/sprite.gif);
288            mask: url(../img/sprite.gif);
289    -webkit-mask-size: 7500% 100%;
290            mask-size: 7500% 100%;
291    -webkit-animation: mask-play 1.5s steps(74) forwards;
292            animation: mask-play 1.5s steps(74) forwards;
293  }
294  
295  @-webkit-keyframes mask-play {
296    from {
297      -webkit-mask-position: 0% 0;
298              mask-position: 0% 0;
299    }
300    to {
301      -webkit-mask-position: 100% 0;
302              mask-position: 100% 0;    
303    }
304  }
305  
306  @keyframes mask-play {
307    from {
308      -webkit-mask-position: 0% 0;
309              mask-position: 0% 0;    
310    }
311    to {
312      -webkit-mask-position: 100% 0;
313              mask-position: 100% 0;
314    }
315  }
316  
317  .screen{
318    position: fixed;
319    top: 0;
320    left: 0;
321    width: 100vw;
322    height: 100vh;
323    z-index: -1;
324    background-color: #0C143A;
325  
326    -webkit-transition: all 0.3s ease;
327    -moz-transition: all 0.3s ease;
328    -o-transition: all 0.3s ease;
329    transition: all 0.3s ease;
330  }
331  
332  .overlay{
333    -webkit-transition: all 0.3s ease;
334    -moz-transition: all 0.3s ease;
335    -o-transition: all 0.3s ease;
336    transition: all 0.3s ease;
337    z-index: -1;
338  }
339  
340  .op0{
341    opacity: 0;
342    -webkit-transition: all 0.5s ease;
343    -moz-transition: all 0.5s ease;
344    -o-transition: all 0.5s ease;
345    transition: all 0.5s ease;
346  }
347  
348  .headline{
349    margin-top: 100px;
350  }
351  
352  // About
353  .about-block{
354    padding: 60px 50px;
355    background-color: #1C2449;
356  }
357  
358  .about-wrapper{
359    background-image: url("/img/about-side.jpg");
360    background-repeat: no-repeat;
361    background-position: top left;
362    background-size: 50% auto;
363  }
364  
365  .block-content h3{
366    line-height: normal;
367    font-size: 40px;
368    letter-spacing: 0.1em;
369  }
370  
371  .block-content h5{
372    line-height: normal;
373    font-size: 17px;
374    letter-spacing: 0.1em;
375    opacity: 0.6;
376  }
377  
378  .block-content{
379    padding: 40px;
380  }
381  
382  .side-image{
383    background-image: url("/img/about-side.jpg");
384    background-size: 100% auto;
385    background-repeat: no-repeat;
386  }
387  
388  .block1{
389    background-image: url("../img/001.png");
390    background-position: 2em 2em;
391    background-repeat: no-repeat;
392  }
393  
394  .block2{
395    background-image: url("../img/002.png");
396    background-position: 2em 2em;
397    background-repeat: no-repeat;
398  }
399  
400  // partner block
401  .partner-block, .social-block{
402    background-color: #1C2449;
403    min-height: 330px;
404    margin-bottom: 20px;
405  }
406  
407  .partner-block img{
408    width: auto;
409    height: 60px;
410  }
411  
412  // social block
413  .social-block img{
414    width: 62px;
415    height: auto;
416  }
417  
418  .social-block h6{
419    font-size: 17px;
420    text-align: center;
421    letter-spacing: 0.1em;
422    margin-top: 20px;
423    opacity: 0.4;
424  }
425  
426  
427  // footer
428  .underline {
429   text-decoration: none; 
430   position: relative; 
431  }   
432  
433  .underline:after {
434      position: absolute;
435      height: 5px;
436      margin: 0 auto;
437      content: '';
438      width: 100%;
439      background-color: #3830CF;
440      opacity: 0.7;
441      left: 0;
442      bottom: 1px;
443      z-index: 1;
444  }
445  
446  // animated css
447  .animated {
448    -webkit-animation-duration: 1s;
449    animation-duration: 1s;
450    -webkit-animation-fill-mode: both;
451    animation-fill-mode: both;
452  }
453  
454  @keyframes fadeInRight {
455    from {
456      opacity: 0;
457      transform: translate3d(20%, 0, 0);
458    }
459  
460    to {
461      opacity: 1;
462      transform: translate3d(0, 0, 0);
463    }
464  }
465  
466  .fadeInRight {
467    animation-name: fadeInRight;
468  }
469  
470  @keyframes fadeInLeft {
471    from {
472      opacity: 0;
473      transform: translate3d(-30%, 0, 0);
474    }
475  
476    to {
477      opacity: 1;
478      transform: translate3d(0, 0, 0);
479    }
480  }
481  
482  .fadeInLeft {
483    animation-name: fadeInLeft;
484  }
485  
486  // Media queries
487  // Extra small devices (portrait phones)
488  @media (max-width: 575px) { 
489    .navbar-brand img{
490      width: 60px;
491    }
492    .partner-block, .social-block{
493      background-color: #1C2449;
494      min-height: 90px;
495      margin-bottom: 20px;
496    }
497    .social-block img{
498      width: auto;
499      height: 50px;
500    }
501  
502    .mt100{
503      margin-top: 10px;
504    }
505  
506    .mt50{
507      margin-top: 10px;
508    }
509  
510    .mb100{
511      margin-bottom: 30px;
512    }
513  
514    .screen{
515      height: 100vh;
516    }
517  
518    .about-block{
519      padding: 20px 20px;
520    }
521  
522    .about-wrapper{
523      background-size: auto 100%;
524    }
525  
526  }   
527  
528  // Small devices (landscape phones)
529  @media (min-width: 576px){
530    .navbar-brand img{
531      width: 80px;
532    }
533  
534    .block-content h3{
535      min-height: 100px;
536    }
537  
538    .description{
539      min-height: 230px;
540    }
541  
542    .social-block img{
543      width: auto;
544      height: 50px;
545    }
546  }
547  
548  // Medium devices (tablets)
549  @media (max-width: 768px){
550    .navbar-nav .nav-item{
551      background-color: rgba(13,21,57,0.85);
552      border-bottom: 4px solid #B43C4B;
553      padding-top: 5px;
554      padding-bottom: 5px;
555    }
556  
557    .navbar-nav .nav-link {
558      margin-left: 0;
559    }
560  
561    .modal-header{
562      padding: 50px 30px 20px 30px;
563    }
564  
565    .modal-body{
566      padding: 40px 30px 40px 30px;
567    }
568  
569    .modal-footer{
570      padding: 20px 30px 30px 30px;
571    }
572  }
573  
574  // Medium devices (tablets)
575  @media (min-width: 768px){
576    .navbar-brand img{
577      width: 80px;
578    }
579  }
580  
581  // Large devices (desktops)
582  @media (min-width: 992px) {
583  
584  }
585  
586  // Extra large devices (large desktops)
587  @media (min-width: 1200px) {  
588  	.container {
589      	max-width: 1185px;
590  	}
591  }