/*@font-face {font-family: "GraphiqueW01-Regular"; src: url("//db.onlinewebfonts.com/t/ab83b275830b2d585ea027c47e3b237a.eot"); src: url("//db.onlinewebfonts.com/t/ab83b275830b2d585ea027c47e3b237a.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/ab83b275830b2d585ea027c47e3b237a.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/ab83b275830b2d585ea027c47e3b237a.woff") format("woff"), url("//db.onlinewebfonts.com/t/ab83b275830b2d585ea027c47e3b237a.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/ab83b275830b2d585ea027c47e3b237a.svg#GraphiqueW01-Regular") format("svg"); } 
*/

/*@font-face {font-family: "GraphiqueW01-Regular"; src: url("//db.onlinewebfonts.com/t/ab83b275830b2d585ea027c47e3b237a.eot"); src: url("//db.onlinewebfonts.com/t/ab83b275830b2d585ea027c47e3b237a.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/ab83b275830b2d585ea027c47e3b237a.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/ab83b275830b2d585ea027c47e3b237a.woff") format("woff"), url("//db.onlinewebfonts.com/t/ab83b275830b2d585ea027c47e3b237a.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/ab83b275830b2d585ea027c47e3b237a.svg#GraphiqueW01-Regular") format("svg"); } */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300&family=Montserrat&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');


	h5, .h5 {	
	font-family: 'Lato', sans-serif;	
	font-size: 1.9rem;	
	font-weight: 100;	
}

/*

    h5, .h5 {   
    font-family: 'GraphiqueW01-Regular', sans-serif;    
    font-size: 1.9rem;  
    font-weight: 400;   
}*/

/*	.h2, {	
	
	font-size: 1.9rem;	
	font-weight: 400;	
}*/

canvas { outline: none; border: none; }

.div-body {
  padding: 0;
  margin: 0; 
  height: 10vh;
  background: black;
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  display: block;
  justify-content: center;
  align-items: center;
  overflow: visible;
  position: fixed;
  z-index: 99999999991;
  left: 25%;
  top: 2.5%;
 /* transform: translateX(-50%);*/


}


.whitespace
{
  white-space: pre;

}


@media screen and (max-width: 1500px) {

    .div-body {
  left: 12%;
  top: 2.5%;
}

.cd-header-b {
	position:absolute;
  	margin-top: 10% !important;
	width:100%;
	height: 70%;
	opacity:1;
	background-color: 000;
	overflow-x: hidden;
	overflow-y: auto;
}


}



@media screen and (max-width: 1200px) {

    .div-body {
  left: 0%;
  top: 0%;
}

.cd-header-b {
	position:absolute;
  	margin-top: 9% !important;
	width:100%;
	height: 70%;
	opacity:1;
	background-color: 000;
	overflow-x: hidden;
	overflow-y: auto;
}

}

@media screen and (max-width: 1050px) {

    .div-body {
display: none;
}


}

/*
@media screen and (max-width: 1300px) {
    .div-body {
  left: 15%;
  top: 2.5%;
  transform: translateX(-50%);


	}
}

@media screen and (max-width: 1400px) {
    .div-body {
  padding: 0;
  margin: 0; 
  height: 10vh;
  background: black;
  font-family: 'Lato', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  position: fixed;
  left: %;
  top: 2.5%;
  transform: translateX(-50%);
  z-index: 99999999991;
	}
}


.split {
        display: none;
        color: #f00;
    }

@media screen and (max-width: 1100px) {

    .div-body {
  left: 0%;
  top: 0%;
}

}


@media screen and (max-width: 1000px) {

  .split-title {
  display: block;
  height: 0px;
}

 .div-body {
  left: 0%;
  top: 0%;
}

}


@media screen and (max-width: 900px) {



}


.split-title {
  display: None;
}
*/

ul {
}


li { 
  list-style: none; 
  display: inline-block;
}


label { display: inline-block }

.split{

}


input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;

  height: 80px;
  width: 80px;
  z-index: 100;
}



.shadow3:hover {
	border-radius: 25px;
    animation: glow 3s linear infinite;
}


.cool-div {
display: block;
justify-content: center;
align-items: center;
font-size: 72px;
cursor: pointer;
margin: 0 4px;
border-radius: 20px;
box-shadow: -1px -1px 4px rgba(255, 255, 255, 0.05),
4px 4px 6px rgba(0, 0, 0, 0.2),
inset -1px -1px 4px rgba(255, 255, 255, 0.05),
inset 1px 1px 1px rgba(0, 0, 0, 0.1);
cursor: hand;

}


input[type="checkbox"]:checked ~ div {
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.05),
    inset 0px 0px 6px rgba(0, 0, 0, 0.2);
  color: yellow;
  text-shadow: 0px 0px 15px yellow, 0px 0px
   25px yellow;
  animation: glow 3.5s linear infinite;
}

@keyframes glow {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}


/*
	h4, .h4 {	
	font-family: 'GraphiqueW01-Regular', sans-serif;	
	font-size: 1.9rem;	
	font-weight: 400;	
}

	.h2, {	
	
	font-size: 1.9rem;	
	font-weight: 400;	
}*/


.show {
 display: block;
}

.hide {
	display: none;
}

.scroll_content {

	overflow: scroll;
}




.show-thing {
	z-index: 9999999999;
}




.behind{
	z-index: -1;
}





@keyframes leaves{
0% { transform: scale(1);
	 -webkit-transform: scale(1.0);
   }
100% {
	transform: scale(0);
	-webkit-transform:scale(0.0);
	 }
}


@keyframes enters {

	0% {
		display: none;
		opacity:0;
		transform: scale(0);
		-webkit-transform: scale(0);
	}


	1%{
		  display: block;
        opacity: 0;
	}



	100% {
		transform: scale(1);
		-webkit-transform: scale(1);
       	opacity: .75;

	}
}




@keyframes slideUp {


		  0% {
		  	transform: translateY(200px);
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: .8;
        transform: translateY(0px);
    }

}



@keyframes slidein {
  from {
    margin-right: 100%;
    width: 300%; 
  }

  to {
    margin-right: 0%;
    width: 100%;
  }
}



@keyframes slide-down {

	  0% {
        display: none;
        opacity: 0;
/*        margin-left: -30%;*/
transform: translateY(-300%);
    	
    }

    1% {
        display: block;
 /*       opacity: 0;*/
    }


    80% {
        display: block;
        opacity: .5;
    }


    100% {
        display: block;
        opacity: 1;
        /*margin-left: 0%;*/
        transform: translateY(0%);
    		
    }

}



@keyframes slide-up {

	  0% {
        display: none;
        opacity: 0;
/*        margin-left: -30%;*/
transform: translateY(-40%);
    	
    }

    1% {
        display: block;
 /*       opacity: 0;*/
    }


    80% {
        display: block;
        opacity: .5;
    }


    100% {
        display: block;
        opacity: 1;
        /*margin-left: 0%;*/
        transform: translateY(0%);
    		
    }

}


@keyframes slide-left {

	  0% {
        display: none;
        opacity: 0;
transform: translateX(-40%);
    	
    }

    1% {
        display: block;
    }


    80% {
        display: block;
        opacity: .5;
    }


    100% {
        display: block;
        opacity: 1;
        transform: translateX(0%);
    		
    }

}


@keyframes slide-right {

	  0% {
        display: none;
        opacity: 0;
        margin-left: -80%;
    	
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
        margin-left: 0%;
    		
    }

}



@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}


.about_img
{		
	border-radius:5%;
	opacity: 0;

}

.about_intro
{
	opacity: 0;

}

.about_form
{
	opacity: 0;

}

.mtip_intro
{
	opacity: 0;
}

.netviz_opacity
{
	opacity: 0;
}

.mtip_title
{
	opacity: 0;
}

.mtip_content
{
	opacity: 0;
}


.transition-x {
animation: enters 1s linear forwards;
animation-delay: .3s;
z-index: 3;
}


.transitiont-y
{
animation: slide-left 2s forwards;
animation-timing-function: ease-out;
animation-delay: 2s;
}

.transitionb-y
{
animation: slideUp 1.6s ease-out forwards;
animation-delay: 8s;

}






	
@keyframes show {	
0%	
{	
	transfrom: scale(0);	
}	
5%	
{	
	transform: scale{1};	
}	
}	

@keyframes scalebig {	
0%	
{	
	box-shadow: 0px 0px 30px 30px #03070C;	
	transform: scale(0);	
	opacity: 1;	
		
}	

5%	
{   	
	box-shadow: 0px 0px 30px 30px #03070C;	
	border:0;	
	transform: scale(1);	
}	
90%	
{   	
	box-shadow: 0px 0px 30px 30px #03070C;	
	border:0;	
	transform: scale(1);	
}	
97%	
{		
	box-shadow: 0px 0px 30px 30px #03070C;	
		
	transform: scale(1.1);	
	border: 0	
		
}	
98.5%	
{		
	box-shadow: 0px 0px 30px 30px #FFF;	
	transform: scale(.2);	
	border: 10px solid white;	
}	
99%	
{		
	box-shadow: 0px 0px 60px 60px #FFF;	
	transform: scale(.005);	
	opacity: 1;	
}	
100%	
{		
	box-shadow: 0px 0px 60px 60px #FFF;	
	border: 10px solid white;	
	transform: scale(0);	
	opacity: 1;	
}	
}

	
.netviz-an {	

animation: fadeInFromNone 3s linear;	
position:absolute	;	
height: 400px;	
width: 800px ;	
background-repeat: no-repeat;	
z-index:1;	
opacity: 1;	
top: 25%;	
left: 50%;	
margin-left: -25%;	
border-radius: 	10%;	
-moz-border-radius: 10%; 	
box-shadow: 0px 0px 30px 30px #03070C;	

}	

	



.transition-x-customfab {	
animation: enters 1s linear forwards;	
animation-delay: .3s;	
z-index: 3;	
}	


.text-customfab	
{	
animation: slide-left 1s forwards;	
animation-timing-function: ease-out;	
animation-delay: .3s;	
}	


.form-customfab	
{	
animation: slideUp 1.6s ease-out forwards;	
animation-delay: 1s;	
}	


.text-networkviz	
{	
animation: slide-left 2s forwards;	
animation-timing-function: ease-out;	
}	


.title-netviz-anim	
{	
animation: slide-down 1s forwards;	
animation-timing-function: ease-out;	
animation-delay: 0s;	
}	


.text-mtip	
{	
animation: slide-down 3s forwards;	
animation-timing-function: ease-out;	
animation-delay: 3.5s;
}	

.mtip-trainsition	
{	

animation: fadeInFromNone 5s forwards;	

animation-timing-function: ease-out;	
animation-delay: 1s;	
}

.mtip-trainsition-2   
{   

animation: fadeInFromNone 5s forwards;  

animation-timing-function: ease-out;    
animation-delay: 2s;    
}


.shopping-cart-trainsition   
{   

animation: fadeInFromNone 5s forwards;  

animation-timing-function: ease-out;    
animation-delay: 0s;    
}

.fade_in_delayed   
{   

animation: fadeInFromNone 5s forwards;  

animation-timing-function: ease-out;    
animation-delay: 1s;  
}

.fade_in_normal   
{   

animation: fadeInFromNone 5s forwards;  

animation-timing-function: ease-out;    
animation-delay: 0s;  
}

.instant   
{   

animation: fadeInFromNone 1s forwards;  

animation-timing-function: ease-out;    
animation-delay: 0s;  
}



.text-protein	
{	
animation: slide-left 1s forwards;	

animation-timing-function: ease-out;	
animation-delay: .3s;	
}	

.opacity_zero
{
	opacity: 0;
}

.netviz-graphic	
{	

}	

.cd-header {
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(20, 21, 26, 0.96);
	width: 100%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	height: 100px;
	background: transparent;
	box-shadow: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow-x: hidden;
}


.cd-header-b {
	position:absolute;
  	margin-top: 7%;
	width:100%;
	height: 70%;
	opacity:1;
	background-color: 000;
	overflow-x: hidden;
	overflow-y: visible;
}

.cd-header-c {
	position:absolute;
	width:100%;
	height: 70%;
	opacity:1;
	overflow-x: hidden;
	overflow-y: hidden;
	z-index: 99999;
}


.cd-header-particles {
position:absolute;
width:100%;
height: 70%;
opacity:1;
overflow-x: hidden;
overflow-y: hidden;
z-index: 99999999;
}


.cd-header-mtip {
position:absolute;
margin-top: 6%;
width:100%;
height: 70%;
opacity:1;
overflow-x: hidden;
overflow-y: hidden;
}


.luck
{
position: absolute;
width: 100%;
height: 100%;
padding: 100px;

}


.particles 
{
	width: 600px;
	height: 600px;
	margin: auto;
	margin-bottom: -30%;
	border: none;

}

#c
{
overflow-x: hidden;
overflow-y: hidden;
}

audio { 
	height: 25px;
	border: none;
	 }

.chrome-audio
{
	height:25px;
}


.nav-but-wrap{ 
	position: relative;
	display: inline-block;
	float: right;
	padding-left: 15px;
	padding-top: 25px;
	-webkit-transition : all 0.3s ease-out;
	-moz-transition : all 0.3s ease-out;
	-o-transition :all 0.3s ease-out;
	transition : all 0.3s ease-out;
}


.titles
{
	font-family: 'Muli', sans-serif;
}




/* order icon */


#magic {

  position: fixed;
  width: 100%;
  /*height: 100%;*/
   height: 93vh;
  display: block;
  top: 0;
  left: 0;
  border: none;
  opacity: 0;
  /*z-index: -9999;*/
}

.playground{

  position: fixed;
  width: 100%;
  height: 100vh;
  display: block;
  top: 0;
  left: 0;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  border: none;

}

.logo {
    width: 75px;
    height: 75px;
}

.bottomPosition{

  text-align: center;
/*  margin-bottom: 50px;*/
  
}