body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	/*background: url(bg_startpage.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
}

	
#principal{
   height: 850px;
   max-width: 1200px;
   left: 50%;
   transform: translate(-50%);
   position: relative;
   align-items: center;
   justify-content: center;
   z-index:5;
}

.circ{
	border-radius: 100%;
	position: absolute;
	z-index: 9;
	/*essas duas linhas abaixo apenas para ilustração*/
   /*pode apagá-las*/
	text-align: center;
	line-height: 50px;
	
}

.circ::before{
   content: '';
   width: 100%;
   height: 100%;
   position: absolute;
   left: -4px;
   top: -4px;
   border-radius: 100%;
   z-index: -1;
}

.c60{
	width: 400px;
	height: 40px;
	z-index: 21;
	line-height: 22px;
	font-size:22px;
	font-weight:100;
}

.c80{
   width: 80px;
   height: 80px;
}

.c100{
   width: 700px;
   height: 700px;
   z-index:15;
}

svg{
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   z-index:20;
   opacity: 0;
   -webkit-animation: fading ease-in 10s;
   animation: fading ease-in 10s;
   -webkit-animation-fill-mode: forwards;
   animation-fill-mode: forwards;
   -webkit-animation-duration: 5s;
   animation-duration: 5s;
}



#principal span:nth-child(1){
	top: 50%;
	left: 50%;
	margin-top: -320px;
	margin-left: -320px;
}

#principal span:nth-child(2){
   top: 185px;
   left: -79px;
}

#principal span:nth-child(3){
   top: 245px;
   right: 128px;
}


#principal span:nth-child(4){
   top: 660px;
   left: -50px;
}

#principal span:nth-child(5){
   top:660px;
   right: 155px;
}





a {
	position: absolute;
	transition: transform .5s ease-in-out;
  --scale: 1;
	transform: translateX(-50%) translateY(-50%) scale(var(--scale));
	text-decoration: none;
	padding: 5px;
    color: #ccc;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
  border-radius: 50%;
}

a.class1:hover {
  --scale: 1.1;color: #000;
   -webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B1E76E, 0 0 70px #B1E76E, 0 0 80px #B1E76E, 0 0 100px #B1E76E, 0 0 150px #CFC16F;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B1E76E, 0 0 35px #B1E76E, 0 0 40px #B1E76E, 0 0 50px #B1E76E, 0 0 75px #B1E76E;
  }
}
@-moz-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B1E76E, 0 0 70px #B1E76E, 0 0 80px #B1E76E, 0 0 100px #B1E76E, 0 0 150px #CFC16F;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B1E76E, 0 0 35px #B1E76E, 0 0 40px #B1E76E, 0 0 50px #B1E76E, 0 0 75px #B1E76E;
  }
}
@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #B1E76E, 0 0 70px #B1E76E, 0 0 80px #B1E76E, 0 0 100px #B1E76E, 0 0 150px #CFC16F;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #B1E76E, 0 0 35px #B1E76E, 0 0 40px #B1E76E, 0 0 50px #B1E76E, 0 0 75px #B1E76E;
  }
}


a.class2:hover {
  --scale: 1.3;color: #000;
   -webkit-animation: neon2 1.5s ease-in-out infinite alternate;
  -moz-animation: neon2 1.5s ease-in-out infinite alternate;
  animation: neon2 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #BC6096, 0 0 70px #BC6096, 0 0 80px #BC6096, 0 0 100px #BC6096, 0 0 150px #BC6096;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #BC6096, 0 0 35px #BC6096, 0 0 40px #BC6096, 0 0 50px #BC6096, 0 0 75px #BC6096;
  }
}
@-moz-keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #BC6096, 0 0 70px #BC6096, 0 0 80px #BC6096, 0 0 100px #BC6096, 0 0 150px #BC6096;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #BC6096, 0 0 35px #BC6096, 0 0 40px #BC6096, 0 0 50px #BC6096, 0 0 75px #BC6096;
  }
}
@keyframes neon2 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #BC6096, 0 0 70px #BC6096, 0 0 80px #BC6096, 0 0 100px #BC6096, 0 0 150px #BC6096;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #BC6096, 0 0 35px #BC6096, 0 0 40px #BC6096, 0 0 50px #BC6096, 0 0 75px #BC6096;
  }
}

a.class3:hover {
  --scale: 1.3;color: #000;
   -webkit-animation: neon3 1.5s ease-in-out infinite alternate;
  -moz-animation: neon3 1.5s ease-in-out infinite alternate;
  animation: neon3 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #F8EF39, 0 0 70px #F8EF39, 0 0 80px #F8EF39, 0 0 100px #F8EF39, 0 0 150px #F8EF39;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #F8EF39, 0 0 35px #F8EF39, 0 0 40px #F8EF39, 0 0 50px #F8EF39, 0 0 75px #F8EF39;
  }
}
@-moz-keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #F8EF39, 0 0 70px #F8EF39, 0 0 80px #F8EF39, 0 0 100px #F8EF39, 0 0 150px #F8EF39;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #F8EF39, 0 0 35px #F8EF39, 0 0 40px #F8EF39, 0 0 50px #F8EF39, 0 0 75px #F8EF39;
  }
}
@keyframes neon3 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #F8EF39, 0 0 70px #F8EF39, 0 0 80px #F8EF39, 0 0 100px #F8EF39, 0 0 150px #F8EF39;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #F8EF39, 0 0 35px #F8EF39, 0 0 40px #F8EF39, 0 0 50px #F8EF39, 0 0 75px #F8EF39;
  }
}

a.class4:hover {
  --scale: 1.3;color: #000;
   -webkit-animation: neon4 1.5s ease-in-out infinite alternate;
  -moz-animation: neon4 1.5s ease-in-out infinite alternate;
  animation: neon4 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #C38854, 0 0 70px #C38854, 0 0 80px #C38854, 0 0 100px #C38854, 0 0 150px #C38854;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #C38854, 0 0 35px #C38854, 0 0 40px #C38854, 0 0 50px #C38854, 0 0 75px #C38854;
  }
}
@-moz-keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #C38854, 0 0 70px #C38854, 0 0 80px #C38854, 0 0 100px #C38854, 0 0 150px #C38854;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #C38854, 0 0 35px #C38854, 0 0 40px #C38854, 0 0 50px #C38854, 0 0 75px #C38854;
  }
}
@keyframes neon4 {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #C38854, 0 0 70px #C38854, 0 0 80px #C38854, 0 0 100px #C38854, 0 0 150px #C38854;
  }
  to {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #C38854, 0 0 35px #C38854, 0 0 40px #C38854, 0 0 50px #C38854, 0 0 75px #C38854;
  }
}



@-webkit-keyframes fading {
    from {
        opacity: 0;
    }
    to {
         opacity: 1;   
    }
}
@-moz-keyframes fading {
    from {
        opacity: 0;
    }
    to {
         opacity: 1;   
    }
}

@keyframes fading {
    from {
        opacity: 0;
    }
    to {
         opacity: 1;   
    }
}

.invisible {
    opacity: 0;
    -webkit-animation: fading ease-in 1s;
    animation: fading ease-in 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.invisible.one {
-webkit-animation-delay: 5.4s;
    animation-delay: 5.4s
}

.invisible.two {
    -webkit-animation-delay: 6.3s;
    animation-delay: 6.3s
}

.invisible.three {
    -webkit-animation-delay: 7.1s;
    animation-delay: 7.1s;
}

.invisible.a {
    -webkit-animation-delay: 4.2s;
    animation-delay: 4.2s;
}

.invisible.b {
    -webkit-animation-delay: 4.4s;
    animation-delay: 4.4s;
}

.invisible.c {
    -webkit-animation-delay: 4.6s;
    animation-delay: 4.6s;
}

.invisible.d {
    -webkit-animation-delay: 4.8s;
    animation-delay: 4.8s;
}


.video-container {
  width: 100%;
  min-height: 100%;
  position: absolute;
  left: 0px;
  /* center vertically */
  top: 50%;
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.video-container::before {
  content: "";
  display: block;
  height: 0px;
  padding-bottom: 56.25%; /* 100% * 9 / 16 */
}
.video-container video {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0px;
  /* center horizontally */
  left: 50%;
  -moz-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.imprint {
  position: relative;
  margin:0 auto;
  width: 190px;
  top:900px;
  z.index:30;
 
}

.imprint a {
	position: relative;
	color: #ccc;
	text-decoration: none;
	padding: 5px;
	font-size: 14px; 
	 -webkit-animation: none;
  -moz-animation: none;
  animation: none;
}