@charset "utf-8";
/* CSS Document */

body{
	margin:0;
	min-height:100vh;
	padding:0;
	font-family: 'Assistant', sans-serif;
	background: #eee;
	background-image: url("../img/bg-body.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position:center;
	background-attachment: fixed;
	
}

a {text-decoration:none;}
p, h1, h2, h3, h4, h5 {margin:0;}
h1 {margin:50px 0;}
img{margin:0;}

h5{
	font-size:16px;
}





/* ------- Particles ------------------------- */
/* ---  https://codepen.io/anon/pen/XyGZNp --- */

canvas{ display: block; vertical-align: bottom; }    /* ---- reset ---- */ 

/* ---- particles.js container ---- */ 
#particles-js{ position:fixed; width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; z-index:1; filter: opacity(0.7);} 

/* ---- stats.js ---- */ 
.count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } 
.js-count-particles{ font-size: 1.1em; } 
#stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } 
#stats{ border-radius: 3px 3px 0 0; overflow: hidden; } 
.count-particles{ border-radius: 0 0 3px 3px; }



.meta {
	display:flex;
	flex-direction:row;
	background: rgb(31,64,122);
	background: linear-gradient(90deg, rgba(31,64,122,1) 35%, rgba(0,105,180,1) 100%);
	color:white;
	padding:20px;
	overflow: auto;
}

.link-eth img{
	width:110px;
	flex-shrink: 0;
}

.link-d-infk{
	flex-grow:1;
	text-align:right;
	color:white;
}

.logoiis{
	position: relative;
	padding:20px;
	max-width:700px;
	margin:0 auto;
	z-index:99;
}

.logo-wide {display:block;}
.logo-narrow {display:none;}

.labs{
	position: relative;
	display:flex;
	align-items: stretch;
	flex-direction:column;
	flex-wrap: wrap;
	justify-content: center;
	z-index:100;
	padding-bottom: 100px;
}

.card {
	flex-grow: 1;
	display:flex;
	flex-direction:column;
	align-items: center;
	background:white;
	margin:20px;
	padding:20px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	-webkit-box-shadow: 0px 4px 13px -2px rgba(0,0,0,0.1);
	   -moz-box-shadow: 0px 4px 13px -2px rgba(0,0,0,0.1);
	        box-shadow: 0px 4px 13px -2px rgba(0,0,0,0.1);

}


.card a{
	flex-grow: 0;
	flex-shrink: 0;
}

.logo{
	padding:30px 0 40px;
	flex-grow: 1;
	max-width:240px;
}

.prof {
	display:flex;
	flex-grow: 1;
	align-items: center;
	width:100%; 
	margin:5px 0;
	padding:15px 0;
	border-top: 1px solid #ddd;
}


.prof img{
	flex-grow: 0;
	width:60px;
	margin-right:15px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}

.prof div{
	flex-grow: 1;
	align-items: center;

}


.btn{

	background: rgba(0,105,180,1);	
	color:#fff;
	height:20px;
	padding:10px 30px;
	margin:10px 0;
	-webkit-border-radius: 20px;
	   -moz-border-radius: 20px;
	        border-radius: 20px;
	text-transform:uppercase;
	font-weight:500;
	font-size:14px;
	letter-spacing: 0.5px;
	transition: all 0.25s;
}

.btn:hover{
	background: rgba(0,138,237,1.00);
	
}

span.nobreak {
  white-space: nowrap;
}



.break {
  display: none;
  height: 1px;
  width: 100%;
}

@media screen and (min-width: 921px) and (max-width:1600px) {
  .break {display: block;}
}

@media screen and (max-width: 600px) {
	.meta{flex-direction:column; background: linear-gradient(180deg, rgba(31,64,122,1) 35%, rgba(0,105,180,1) 100%);}
    .link-d-infk{text-align:left; padding-top:10px;}
	.card {flex-direction:column;}
	.logo{padding:15px;}
	.logo-wide {display:none;}
	.logo-narrow {display:block;}
}

@media screen and (min-width: 601px) and (max-width: 920px){
	.labs {flex-direction:column;}
	.card {flex-direction:row; justify-content: space-around;}
	.logo{max-width:160px; padding:10px 5vw; flex-grow: 3;}
	.prof {width:auto; margin:0; flex-grow: 3; padding:0 20px 0 0; border-top: none;}	
}

@media screen and (min-width: 921px) {
	.labs {flex-direction:row; margin:0 2vw;}	
	.card {flex-direction:column; width: 0; max-width:400px;}
}