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

body {
  background-color: #000000;overflow: hidden;
}
.backhome {
	
  
	height: 100vh;
	width: 100%;
	background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover ;
}
.linehover {
	display: inline-block;
	color: #c4c4c7;
	text-decoration: none;
	position: relative;
	 
	letter-spacing: 5px;
	font-size:18px;font-family: 'Krub', sans-serif;
}
.linehover:before {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 50%;
	width: 100%;
	-webkit-transform: translateX(-50%) translateY(0);
	transform: translateX(-50%) translateY(0);
	height: 1px;
	background: #262861;
	opacity: 1;
	-webkit-transition: .25s;
	transition: all 0.3s ease;
}
.linehover:hover:before {
	height: 1px;
	 
	-webkit-transform: translateX(-50%) translateY(6px);
	transform: translateX(-50%) translateY(6px);
}
.logo {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    
    background-repeat: no-repeat; 
	z-index:6;
	background-image: url("../images/logo.svg");
	background-size: 200px auto;
	background-position: center;
}
.mail {
    position: absolute;
    top: 80%;
     right: 0px;
     
    left: 0px;
    margin: auto;
	text-align: center;z-index: 8;
  
}

.circle-multiple .circle {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    background-size: 100%;
    background-repeat: no-repeat; 
	z-index:3
}
.circle-multiple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
	height: 100vw;
  display: block;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
   
	
}
.circle-multiple .circle:nth-of-type(1) {
  animation: psycho 88s linear infinite; 
  background-image: url("../images/circle5.svg");z-index:1
}
.circle-multiple .circle:nth-of-type(2) {mix-blend-mode: color-dodge;
  animation: psycho 58s linear .1s infinite;background-image: url("../images/circle4.svg");z-index:2;
}
.circle-multiple .circle:nth-of-type(4) {mix-blend-mode:difference;
  animation: psycho 128s linear .1s infinite;background-image: url("../images/circle4.svg");z-index:3;
}
.circle-multiple .circle:nth-of-type(5) {mix-blend-mode: screen;
  animation: psycho 223s linear .1s infinite;background-image: url("../images/circle5.svg");z-index:3;
}
.circle-multiple .circle:nth-of-type(3) { 
background-image: url("../images/circle3.svg");z-index:5
}
@media screen and (max-width: 1200px) {
  .circle-multiple {
  overflow: hidden;
  height: 200vw;width: 100vw;
}
  .circle-multiple .circle{
 left: -50vw;
  height: 200vw;
  width: 200vw;
}
.linehover {
 
	font-size:120%;
}
.logo {
 
    background-size: 50% auto;
    
}

}
@keyframes psycho {
  0% {
    transform: rotate(0deg) scale(1) translate(0, 0);
  }
  33% {
    transform: rotate(360deg) scale(1) translate(5px, 5px);
  }
  66% {
    transform: rotate(720deg) scale(1) translate(-5px, -5px);
  }
  100% {
    transform: rotate(1080deg) scale(1) translate(0, 0);
  }
}
 

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadein {
   
  
	animation: fadeInUp 1s cubic-bezier(.59, .05, 1, 1)  ;
}
@keyframes fadeIn {
  from {
    opacity: 0;
     
  }

  to {
    opacity: 1;
    
  }
}

.fadein2 {
   
  
	animation: fadeIn 2s cubic-bezier(.59, .05, 1, 1)  ;
}