@charset "UTF-8";

svg {
    width:100%;
    height:100%;
}

/*.flexgrid {
	flex:1;
	height: 1200px;
	min-height: -webkit-fill-available;
	min-width: 100%;
 	display: grid;
	grid-template-columns: repeat(10, calc(10% - 10px));
	grid-template-rows: repeat(20, calc(5% - 10px));
	grid-gap: 10px;
	align-content: center;
	justify-content: center;
	margin: 0 0 30px 0;
	clear: both;
	float: left;
	background-color: #000;
}*/

.item01 {
	grid-column: 1 / 7;
	grid-row: 1 / 4;
	font-size: 40px;
}

.item01 img {
	max-width: 80%;
}

.item02 {
	grid-column: 7 / 17;
	grid-row: 1 / 4;
	font-size: 40px;
	flex-direction: column;
  	justify-content: space-between;
}

.item02 .text_middle  {
	-webkit-text-stroke-width: 1px;
  	-webkit-text-stroke-color: white;
	color:#222 !important;
	position:relative;
	bottom:10px;
	left:3px;
}

.item02 .flex .fa-thin {
    font-size: 14vw;
}

.item03 {
	grid-column: 17 / 23;
	grid-row: 1 / 4;
	font-size: 40px;
	flex-direction: column;
  	justify-content: space-between;
}

.item03 .text_middle  {
	position:relative;
	bottom:10px;
	left:3px;
	font-size: 10vw;
}

.item04 {
	grid-column: 1 / 4;
	grid-row: 4 / 8;
	font-size: 40px;
}

.item05 {
	grid-column: 4 / 7;
	grid-row: 4 / 9;
	font-size: 40px;
}

.item06 {
	grid-column: 17 / 20;
	grid-row: 4 / 9;
	font-size: 40px;
}

.item07 {
	grid-column: 20 / 23;
	grid-row: 4 / 8;
	font-size: 40px;
}

.item08 {
	grid-column: 17 / 20;
	grid-row: 9 / 11;
	font-size: 40px;
}

.item09 {
	grid-column: 20 / 23;
	grid-row: 8 / 11;
	font-size: 40px;
}

.item10 {
	grid-column: 4 / 7;
	grid-row: 9 / 11;
	font-size: 40px;
	
}

.item10 .text_middle  {
	position:relative;
	bottom:5px;
	left:3px;
	font-size: 8vh;
}

.item11 {
	grid-column: 1 / 4;
	grid-row: 8 / 11;
	font-size: 40px;
}

.item12 {
	grid-column: 7 / 17;
	grid-row: 4 / 10;
	font-size: 40px;
}

.item13 {
	grid-column: 1 / 4;
	grid-row: 11 / 13;
	font-size: 40px;
}

.item14 {
	grid-column: 4 / 7;
	grid-row: 11 / 13;
	font-size: 40px;
}

.item15 {
	grid-column: 7 / 17;
	grid-row: 10 / 13;
	font-size: 40px;
}

.item16 {
	grid-column: 17 / 19;
	grid-row: 11 / 13;
	font-size: 40px;
}

.item17 {
	grid-column: 19 / 21;
	grid-row: 11 / 13;
	font-size: 40px;
}

.item18 {
	grid-column: 21 / 23;
	grid-row: 11 / 13;
	font-size: 40px;
}



.item1a {
	/*grid-column: 1 / 3;
	grid-row: 1 / 6;*/
	font-size: 40px;
}

.item1b {
	grid-column: 1 / 3;
	grid-row: 6 / 9;
}

.item1c {
	grid-column: 1 / 3;
	grid-row: 9/ 15;
}

.item1d {
	grid-column: 1 / 3;
	grid-row: 15 / 21;
}

.item2a {
	grid-column: 3 / 5;
	grid-row: 1 / 4;
}

.item2b {
	grid-column: 3 / 5;
	grid-row: 4 / 15;
	background-image: url("images/blockchain.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.item2c {
	grid-column: 3 / 5;
	grid-row: 15 / 18;
}

.item2d {
	grid-column: 3 / 5;
	grid-row: 18 / 21;
}

.item3a {
	grid-column: 5 / 7;
	grid-row: 1 / 4;
}

.item3b {
	grid-column: 5 / 6;
	grid-row: 4 / 7;
}

.item3c {
	grid-column: 6 / 7;
	grid-row: 4 / 7;
}

.item3d {
	grid-column: 5 / 7;
	grid-row: 7 / 15;
}

.item3e {
	grid-column: 5 / 6;
	grid-row: 15 / 18;
}

.item3f {
	grid-column: 6 / 7;
	grid-row: 15 / 18;
}

.item3g {
	grid-column: 5 / 9;
	grid-row: 18 / 21;
	background-image: url(https://unsplash.it/411/?random);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.item4a {
	grid-column: 7 / 9;
	grid-row: 1 / 4;
	background-image: url(https://unsplash.it/439/?random);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.item4b {
	grid-column: 7 / 9;
	grid-row: 4 / 9;
	background-image: url(https://unsplash.it/409/?random);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.item4c {
	grid-column: 7 / 9;
	grid-row: 9 / 18;
	background-image: url(https://unsplash.it/419/?random);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.item5a {
	grid-column: 9 / 11;
	grid-row: 1 / 8;
	background-image: url(https://bplan.knoxium.com/wp-content/uploads/2021/02/AdobeStock_321588747.mp4);
	background-repeat: no-repeat;
	/*background-size: cover;*/
	background-position: center;
}
    
.item5b {
	grid-column: 9 / 11;
	grid-row: 8 / 15;
}

.item5c {
	grid-column: 9 / 11;
	grid-row: 15 / 18;
}

.item5d {
	grid-column: 9 / 11;
	grid-row: 18 / 21;
}

.flexbox {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 10px;
	background-color: #222;
	color: #fff;
	border-radius: 30px;
	position:relative;
}

.bottom_text {
	font-size:18px;
	text-align: center;
	position: absolute;
	bottom: 10px;
	width: calc(100% - 20px);
}

.span_ca, .span_a, .span_cb, .span_b {
	font-size:80px;
}

.span_a {
	margin:0 10px 0 0;
}

.span_cb {
	margin:0 0 0 10px;
}

.span_ca, .span_a {
	color: lightpink;
}

.span_cb, .span_b {
	color: orange;
	font-weight: 900;
}

.fas, .fal {
	font-size:20px;
	margin:-20px 0 0 0
}

.fa-badge-check, .fa-fingerprint {
	color:green;
}

.fa-camera {
	color:yellow;
}

.fa-head-vr {
	color:#ffb133
}

.fa-video {
	color:#80c1ff
}

@media only screen and (max-width: 800px) {
    
h1  {
    font-size: 3em;
}
    
.flexgrid {
    height: 2400px !important;
    grid-template-columns: repeat(10, calc(10% - 1px)) !important;
	grid-template-rows: repeat(38, calc(2.6315789474% - 1px)) !important;

    }
    
.item01 {
    grid-column:  1 / 11;
	grid-row:  1 / 4;    
    }
    
.item02 {
    grid-column:  1 / 11;
	grid-row:  13 / 17; 
    }
    
.item03 {
    grid-column:  1 / 11;
	grid-row:  26 / 30; 
    }
    
.item04 {
    grid-column:  1 / 6;
	grid-row:  4 / 8;    
    }
    
.item05 {
    grid-column:  6 / 11;
	grid-row:  4 / 9;  
    }

.item06 {
    grid-column:  1 / 6;
	grid-row:  30 / 35;    
    }
    
.item07 {
    grid-column:  6 / 11;
	grid-row:  30 / 34;    
    }
    
.item08 {
    grid-column:  1 / 6;
	grid-row:  35 / 37;   
    }
    
.item09 {
    grid-column:  6 /11;
	grid-row:  34 / 37;   
    }
    
.item10 {
    grid-column:  6 / 11;
	grid-row:  9 / 11;  
    }
    
.item11 {
    grid-column:  1 / 6;
	grid-row:  8 / 11;  
    }

.item12 {
    grid-column:  1 / 11;
	grid-row:  17 / 23;   
    }
    
.item13 {
    grid-column: 1 / 6;
	grid-row:  11 / 13;  
    }
    
.item14 {
    grid-column:  6 / 11;
	grid-row:  11 / 13;  
    }
    
.item15 {
    grid-column: 1 / 11;
	grid-row:  23 / 26; 
    }
    
.item16 {
    grid-column:  1 / 4;
	grid-row:  37 / 39;  
    }
    
.item17 {
    grid-column:  4 / 8;
	grid-row:  37 / 39;  
    }

.item18 {
    grid-column:  8 / 11;
	grid-row:  37 / 39;   
    }
    
}  

@media only screen and (max-width: 360px) {
    
h1  {
    font-size: 3em;
}
    
.flexgrid {
    height: 3600px !important;
    grid-template-columns: repeat(1, calc(100% - 1px)) !important;
	grid-template-rows: repeat(58, calc(1.724137931% - 1px)) !important;

    }
    
.item01 {
    grid-column:  1 / 2;
	grid-row:  1 / 4;    
    }
    
.item02 {
    grid-column:  1 / 2;
	grid-row:  22 / 26; 
    }
    
.item03 {
    grid-column:  1 / 2;
	grid-row:  35 / 39; 
    }
    
.item04 {
    grid-column:  1 / 2;
	grid-row:  4 / 8;    
    }
    
.item05 {
    grid-column:  1 / 2;
	grid-row:  11 / 16;  
    }

.item06 {
    grid-column:  1 / 2;
	grid-row:  39 / 44;    
    }
    
.item07 {
    grid-column:  1 / 2;
	grid-row:  46 / 49;    
    }
    
.item08 {
    grid-column:  1 / 2;
	grid-row:  44 / 46;   
    }
    
.item09 {
    grid-column:  1 / 2;
	grid-row:  49 / 52;   
    }
    
.item10 {
    grid-column:  1 / 2;
	grid-row:  16 / 18;  
    }
    
.item11 {
    grid-column:  1 / 2;
	grid-row:  8 / 11;  
    }

.item12 {
    grid-column:  1 / 2;
	grid-row:  26 / 32;   
    }
    
.item13 {
    grid-column: 1 / 2;
	grid-row:  18 / 20;  
    }
    
.item14 {
    grid-column:  1 / 2;
	grid-row:  20 / 22;  
    }
    
.item15 {
    grid-column: 1 / 2;
	grid-row:  32 / 35; 
    }
    
.item16 {
    grid-column:  1 / 2;
	grid-row:  52 / 55;  
    }
    
.item17 {
    grid-column:  1 / 2;
	grid-row:  55 / 57;  
    }

.item18 {
    grid-column:  1 / 2;
	grid-row:  57 / 59;   
    }
    
}