@font-face {
	font-family: 'Circe';
	src: url('font/circe/Circe-Light.eot');
	src: local('Circe Light'), local('Circe-Light'),
		url('font/circe/Circe-Light.eot?#iefix') format('embedded-opentype'),
		url('font/circe/Circe-Light.woff') format('woff'),
		url('font/circe/Circe-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

*{
    margin:  0;
	padding: 0;
	border:  0;
	outline: 0;	
	vertical-align: baseline;
	background:     transparent;			        
	box-sizing:     border-box;
	z-index:        1;	

	font-family: 'Circe', sans-serif;
	font-weight: 300;
	font-style: normal;	
	font-size: 14pt;
	letter-spacing: 1px;

	color:#005499;
}



html, body {
    height:   100%;
    position: relative;	

	background: linear-gradient(253.61deg, rgba(229, 229, 229, 0.2) 0.16%, rgba(0, 84, 153, 0.2) 100.26%), #FFFFFF;
}

textarea,
input[type="text"],
input[type="button"],
input[type="submit"] {    
    border-radius: 0;
}


/* index */

#container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
}

img {
	display: block;
	margin: 0 auto;
	max-width: 50%;	

	animation: show_logo 1.0s ease-in-out 1;
}

@keyframes show_logo {	
	0% {transform: scale(1.2);opacity: 0;}
	100% {transform: scale(1.0);opacity: 1;}
	

}


p {
	position: relative;
	text-align: center;
	font-size: 12pt;
	overflow: hidden; 
	width: 0; 
	animation: typing; 
	animation-duration: 1.0s; 
	white-space: nowrap; 
	animation-timing-function: steps(50, end); animation-fill-mode: forwards; 	
}

p::after {
	position: relative;
  	content: "_";
  	font-size: 40px;
  	line-height: 10px;
  	top:-5px;	
	color: transparent;	

	animation: cursor_pulse 2.5s linear infinite;	
}

@keyframes cursor_pulse {
	0% {color:transparent;}
	33% {opacity:0;color:#FF0000;}
	66% {opacity:1;color: transparent;}
	100% {opacity:0;color:#008CFF;}
}

@keyframes typing { 
	from { width: 0 } 
	to { width: 100% }	
}











/* DESCTOP */

@media (min-width: 1200px) {
	p {
		text-align: center;
		font-size: 20pt;
		animation-duration: 3.0s; 
	}
}
















/*

#animation {
	animation: gradient-animation 3s ease infinite;
}

  
@keyframes gradient-animation {
	0% {
	  background-position: 0% 50%;
	}
	50% {
	  background-position: 100% 50%;
	}
	100% {
	  background-position: 0% 50%;
	}
}



@keyframes css-animation-bounce {
  0%, 100% {
    transform: translateY(0);
	
  }
  25% {
    transform: translateY(-18px);
	
  }
  50% {
    transform: translateY(0);
	
  }
  75% {
    transform: translateY(-10px);
	
  }
  90% {
    transform: translateY(0);
	
  }
}
 


  
  div:first-of-type {    
	animation: showup 7s infinite;		
  }
  
  div:last-of-type {
	width:0px;
	animation: reveal 7s infinite;
	
  }
  
  div:last-of-type span {
	margin-left:-355px;
	animation: slidein 7s infinite;
  }
  
  @keyframes showup {
	  0% {opacity:0;transform: rotate(180deg);}
	  5% {opacity:0.5;}
	  10% {opacity:1;transform: rotate(180deg);}
	  20% {opacity:1;transform: rotate(0deg);}
	  80% {opacity:1;}
	  100% {opacity:0;}
  }
  
  @keyframes slidein {
	  0% { margin-left:-800px; }
	  20% { margin-left:-800px; }
	  35% { margin-left:0px; }
	  100% { margin-left:0px; }
  }
  
  @keyframes reveal {
	  0% {opacity:0;width:0px;}
	  20% {opacity:1;width:0px;}
	  30% {width:355px;}
	  80% {opacity:1;}
	  100% {opacity:0;width:355px;}
  }

  */