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

.site-canvas {
  position:relative;
	z-index: 1;
	
}
.dna {
  position:fixed;
  top:50%;
  left:50%;
	transform:translate(-50%,-50%) rotate(30deg)  scale(0.7);
/*transform:translate(-50%,-50%) rotate(30deg) scale(0.5);*/
  width:150%;
 /* height:250px;*/
	 height:500px;
  text-align:center;
  overflow:hidden;
	opacity: 0.1;

}
.dna_section {
  position:relative;
  margin:0 5px;
 /* width:50px;*/
	 width:50px;
  /*height:250px;*/
	 height:500px;
  display:inline-block;
}
.dna_section .node {
  position:absolute;
  top:0;
  left:0;
  /*width:50px;
  height:50px;*/
 width:50px;
  height:50px;
  border-radius:100%;
 /* background:#5E0035;*/
	background: #fff;
  animation:12s topNode ease-in-out infinite;
}
@keyframes topNode {
  0% {transform:scale(0.5);top:0;z-index:10;opacity:0.75;}
  25% {transform:scale(1);opacity:1;}
  50% {transform:scale(0.5);top:80%;z-index:0;opacity:0.75;}
  75% {transform:scale(0.25);opacity:0.5;}
  100% {transform:scale(0.5);top:0;opacity:0.75;}
}
.dna_section .node.bottom {
  top:auto;
  bottom:0;
  /*background:#5C80BC;*/
	background: #fff;
  animation:12s bottomNode ease-in-out infinite;
}
@keyframes bottomNode {
  0% {transform:scale(0.5);bottom:0; opacity:0.75;}
  25% {transform:scale(0.25);opacity:0.5;}
  50% {transform:scale(0.5);bottom:80%; opacity:0.75;}
  75% {transform:scale(1); opacity:1;}
  100% {transform:scale(0.5);bottom:0; opacity:0.75;}
}

.dna_section .node.middle {
	top:0;
	bottom:0;
	width: 2px;
	height: 100%;
	margin-left: -1px;
	left: 50%;
	/*transform: scaleY(0.75) ;*/
  /*background:#000;*/
	background: #fff;
	position: absolute;
  animation:12s middleNode ease-out infinite;
}
@keyframes middleNode {
 0% {transform:scaleY(0.85); /*background-color: aqua;*/}
 5% {transform:scaleY(0.8);/*background-color: purple;*/}
	10% {transform:scaleY(0.75);/*background-color: white;*/}
	13% {transform:scaleY(0.70);/*background-color: white;*/}
	15% {transform:scaleY(0.65);}
	17% {transform:scaleY(0.55);}
	19% {transform:scaleY(0.48);}
	21% {transform:scaleY(0.37);}
	23% {transform:scaleY(0.12);}
 28% {transform:scaleY(0);/*background-color: red;*/}
  48% {transform:scaleY(0.65);/*background-color: yellow;*/}
 62.5% {transform:scaleY(0.5);/*background-color: white;*/}
  75% {transform:scaleY(0);/*background-color: red;*/}
  100% {transform:scaleY(0.85);/* background-color: aqua;*/}	
}
/*@keyframes middleNode {
 0% {transform:scaleY(0.75);}
  12.5% {transform:scaleY(0.50);}
  25% {transform:scaleY(0);}
  37.5% {transform:scaleY(0.50);}
  50% {transform:scaleY(0.75);}
  62.5% {transform:scaleY(0.50);}
  75% {transform:scaleY(0);}
  87.5% {transform:scaleY(0.50);}
  100% {transform:scaleY(0.75);}	
}*/
@media (max-width: 1024px) {/*429~768px*/

.dna {

	transform:translate(-50%,-50%) rotate(30deg) scale(0.4);
  width:350%;
}



}