@keyframes heroone{
  from{
    clip-path: circle(31% at 50% 56.5%);
	background-color: rgba(6,51,193,1);


  }
  90%
  {
	clip-path: circle(42% at 50% 56.5%);
	background-color: rgba(6,51,193,0.1));   
  }
  to{
    clip-path: circle(45% at 50% 56.5%);
	background-color: rgba(6,51,193,0.1)); 

  }
}
@keyframes herooone{
  from{
    clip-path: circle(25% at 50% 56.5%);
	background-color: rgba(6,51,193,1);


  }
  to{
    clip-path: circle(45% at 50% 56.5%);
	background-color: rgba(6,51,193,0.1)); 

  }
}
@keyframes heroooone{
	from{
		
	background-image: url("../images/uniman_logo_circle.png");
	background-color: rgba(6,51,193,0.0);
	background-repeat: no-repeat;
	background-position: center;
	opacity: 1;
  }
  to{

	/* background-image: none; */
	opacity: 0;
	background-color: rgba(6,51,193,0.0);

  }
  
}
#heroone{
 
  /* background: rgba(255,255,255,0.1); */


}
#heroone:before{
  display:inline-block;content:'';
  height:52%;width:0;
	
	z-index:9;
}
#herooone:before{
  display:inline-block;content:'';
  height:52%;width:0;
	
	z-index:10;
}
#heroone{
  animation:heroone 0s 1;
  /* animation-fill-mode: forwards; */
top: 0px;
}
#herooone{
  animation:herooone 2s 1;
  /* animation-fill-mode: forwards; */
top: 0px;
}
#heroooone{
  animation:heroooone 2s 1;
  /* animation-fill-mode: forwards; */;

background-repeat: no-repeat;
background-position: center;
background-image:none;
}

#heroooone:before{
	background-image: url(../images/uniman_logo_circle.png);
	background-repeat: no-repeat;
	background-position: center;
}
.bg-primary
{
	/* background-color: rgba(6,51,193,1); */
	
}
@keyframes herotwo{
  from{
    clip-path: circle(0% at 50% 55%);
  }
  to{
    clip-path: circle(30% at 50% 55%);
	background-color: rgba(255,255,255,0.1); 
  }
}
#herotwo{
 
  /* background: rgba(255,255,255,0.1); */

}
#herotwo:before{
  display:inline-block;content:'';
  height:50%;width:0;
}
#herotwo{
  animation:herotwo 1s 1;
  /* animation-fill-mode: forwards; */
}
@keyframes herothree{
  from{
    clip-path: circle(0% at 50% 50%);
  }
  to{
    clip-path: circle(30% at 50% 50%);
	background-color: rgba(255,255,255,0.1); 
  }
}
#herothree{
 
  /* background: rgba(255,255,255,0.1); */

}
#herothree:before{
  display:inline-block;content:'';
  height:50%;width:0;
}
#herothree{
  animation:herothree 1s 1;
  /* animation-fill-mode: forwards; */
}
#h1text{
	animation:h1text 2s 1;
	font-size: default;
	animation-delay: 1s;
	animation-fill-mode:forwards;
	opacity: 0;

	}

@keyframes h1text{
	from{
		font-size: 1px;
	}
	to
	{
		
		
	} 
}
.bg-primary li
{
	/* background-color: rgba(6,51,193,1); */
	/*  */
}
.menumargin
{
	margin-right: calc(var(--spacing) * 10);
}
.text2-translate
{
	position: absolute;

    left: 50%;
    /* margin-right: 25%; */
    transform: translate(-50%,-0%);
}
#h2text:before
{
	opacity:0;
}

#h2text
{
	animation:h2text 2s 1;
	opacity:0;
	animation-delay: 2s;
	animation-fill-mode:forwards;
}
@keyframes h2text{
	from{
		opacity:0;
	}
	to
	{
		opacity:1;
		
	}
}	
.spin{
	animation:spin 2s 1;
	animation-delay: 1s;
	animation-fill-mode: forwards;
	opacity: 1;
	/* transform: rotate(0deg); */
	left: 10px;
	
	animation-timeline: view(block);
}
 @keyframes spin { 
        from { 
            transform: fill-mode: 10%;
			
			opacity: 1;
        } to { 
		
            transform: fill-mode: 0; 
			opacity: 1;
        }
    }
}
#myVideo {
  position: relative;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

.footercontent {

  bottom: 0;
 
  width: 100%;
  
}
.lnh
{
	line-height: 0.2em;
	
}
#footer{
	
	bottom: 60px;
}
.pulse2 {
    position: absolute;
    /* width: 200px; */
    height: calc(var(--spacing) * 48);
    margin: auto; 
    top: -35%; left: 0; bottom: 0; right: 0;
    z-index: 20;
    opacity: 0;
    border: 1px solid rgba(255,255,255,0);
  
    -webkit-animation: pulsejg2 4s linear ;
    -moz-animation: pulsejg2 4s linear ;
    animation: pulsejg2 4s linear ;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    -webkit-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .9);
    -moz-box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .9);
    box-shadow: inset 0px 0px 12px 5px rgba(255, 255, 255, .9);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	timeline-trigger: --trigger view() entry 0% exit 100%;
	animation-trigger: --trigger play-forwards;
}
@keyframes pulsejg2 {
    0% {
        transform: scale(.6);
        opacity: 0.1;
		color:#fff;
    }

    40% {
        transform: scale(.8);
        opacity: .2;
    }

    50% {
        transform: scale(1);
        opacity: .7;
		color:#ccc;
    }

    60% {
        transform: scale(1.1);
        opacity: .9;
    }

    80% {
        transform: scale(1.2);
        opacity: .7;
		color:#fff
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}
.contain
{
	position: relative;
}
.spin-image {

    -webkit-animation:spin-image 1s linear ;
    -moz-animation:spin-image 1s linear ;
    animation:spin-image 1s linear;
	timeline-trigger: --trigger view() entry 0% exit 100%;
	animation-trigger: --trigger play-forwards;

}
.spin-image2{

    -webkit-animation:spin-image2 2s linear ;
    -moz-animation:spin-image2 2s linear;
    animation:spin-image2 2s linear;
	timeline-trigger: --trigger view() entry 0% exit 100%;
	animation-trigger: --trigger play-forwards;

}
.spin-image3{

    -webkit-animation:spin-image3 3s linear ;
    -moz-animation:spin-image3 3s linear;
    animation:spin-image3 3s linear;
	timeline-trigger: --trigger view() entry 0% exit 100%;
	animation-trigger: --trigger play-forwards;

}
.spin-image4{

    -webkit-animation:spin-image4 4s linear ;
    -moz-animation:spin-image4 4s linear;
    animation:spin-image4 4s linear;
	timeline-trigger: --trigger view() entry 0% exit 100%;
	animation-trigger: --trigger play-forwards;

}
@keyframes spin-image { 
	0%
	{
		transform:rotate(-60deg); 
	}
    100% { 
        -webkit-transform: rotate(60deg); 
        transform:rotate(0deg); 
    } 
}
@keyframes spin-image2 { 
	0%
	{
		transform:rotate(-60deg); 
	}
	50%
	{
		transform:rotate(-60deg); 
	}
    100% { 
        -webkit-transform: rotate(0deg); 
        transform:rotate(0deg); 
    } 
}
@keyframes spin-image3 { 
	0%
	{
		transform:rotate(-60deg); 
	}
	25%
	{
		transform:rotate(-60deg); 
	}
	75%
	{
		transform:rotate(-60deg); 
	}
    100% { 
        -webkit-transform: rotate(0deg); 
        transform:rotate(0deg); 
    } 
}
@keyframes spin-image4 { 
	0%
	{
		transform:rotate(-60deg); 
	}
	25%
	{
		transform:rotate(-60deg); 
	}
	50%
	{
		transform:rotate(-60deg); 
	}
	75%
	{
		transform:rotate(-60deg); 
	}
    100% { 
        -webkit-transform: rotate(0deg); 
        transform:rotate(0deg); 
    } 
}

.text1
{
	opacity: 1;
	animation: text1 1s linear;
	timeline-trigger: --trigger view() entry 0% exit 100%;
	animation-trigger: --trigger play-forwards;
}
@keyframes text1
{
	0%
	{
		opacity: 0;
	}
	75%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}
.text2
{
	opacity: 1;
	animation: text2 2s linear;
	timeline-trigger: --trigger view() entry 0% exit 100%;
	animation-trigger: --trigger play-forwards;
}
@keyframes text2
{
	0%
	{
		opacity: 0;
	}
	50%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}
.text3
{
	opacity: 1;
	animation: text3 3s linear;
	timeline-trigger: --trigger view() entry 0% exit 100%;
	animation-trigger: --trigger play-forwards;
}
@keyframes text3
{
	0%
	{
		opacity: 0;
	}
	75%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}
.text4
{
	opacity: 1;
	animation: text4 4s linear;
	timeline-trigger: --trigger view() entry 0% exit 100%;
	animation-trigger: --trigger play-forwards;
}
@keyframes text4
{
	0%
	{
		opacity: 0;
	}
	75%
	{
		opacity: 0;
	}
	100%
	{
		opacity: 1;
	}
}