@font-face {
    font-family: Ubuntu-Regular;
    src: url('../fonts/ubuntu/Ubuntu-Regular.ttf'); 
  }
  
  @font-face {
    font-family: Ubuntu-Bold;
    src: url('../fonts/ubuntu/Ubuntu-Bold.ttf'); 
  }
  .inti-logo{
	width: 18em;
	height: auto;
	position: fixed;
	border-radius: 10px;
	top: 16em;
  }
  
 .title-container {
    width: 100%;
    height: 6em;
    margin-left: 0;
    background-size: 100% 100%;
    align-items: center;
    background-repeat: no-repeat;
	background-image: url("../Logo/Logo\ Inti\ Completo_Mesa\ de\ trabajo\ 1.svg");
	animation: tracking-in-expand-fwd 1.2s cubic-bezier(0.4, 0, 1, 1) both;
}
@-webkit-keyframes tracking-in-expand-fwd {
	0% {
	  letter-spacing: -0.5em;
	  -webkit-transform: translateZ(-700px);
			  transform: translateZ(-700px);
	  opacity: 0;
	}
	40% {
	  opacity: 0.6;
	}
	100% {
	  -webkit-transform: translateZ(0);
			  transform: translateZ(0);
	  opacity: 1;
	}
  }
  @keyframes tracking-in-expand-fwd {
	0% {
	  letter-spacing: -0.5em;
	  -webkit-transform: translateZ(-700px);
			  transform: translateZ(-700px);
	  opacity: 0;
	}
	40% {
	  opacity: 0.6;
	}
	100% {
	  -webkit-transform: translateZ(0);
			  transform: translateZ(0);
	  opacity: 1;
	}
  }
  
.title-container .box .role {
	width: 100%;
    position: relative;
}
.title-container .box .role .block {
	width: 0%;
	height: 35px;
	background: #e91e63;
	position: absolute;
	animation: secBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
	animation-delay: 2s;
	z-index: 10;
	display: flex;
}
.title-container .box .role p {
	animation: secFadeIn 2s forwards;
	animation-delay: 3.2s;
	opacity: 0;
	font-weight: 400;
	font-family: 'Lato';
	color: #fff;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 5px;
}
 .title-container .box {
    width: 290px;
    height: 250px;
    position: relative;
    left: 20px;
}
 .title-container .box .title {
	 width: 100%;
	 position: relative;
	 display: flex;
	 align-items: center;
	 height: 50px;
}
 .title-container .box .title .block {
	 width: 0%;
	 height: 35px!important;
	 background: #ffb510;
	 position: absolute;
	 animation: mainBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
	 display: flex;
}
 .title-container .box .title h1 {
    font-family: Ubuntu-Bold;
	 color: #fff;
	 font-size: 32px;
	 -webkit-animation: mainFadeIn 2s forwards;
	 -o-animation: mainFadeIn 2s forwards;
	 animation: mainFadeIn 2s forwards;
	 animation-delay: 1.6s;
	 opacity: 0;
	 display: flex;
	 align-items: baseline;
	 position: relative;
}
 .title-container .box .title h1 span {
	 width: 0px;
	 height: 0px;
	 -webkit-border-radius: 50%;
	 -moz-border-radius: 50%;
	 border-radius: 50%;
	 background: #ffb510;
	 -webkit-animation: load 0.6s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
	 animation: popIn 0.8s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
	 animation-delay: 2s;
	 margin-left: 10px;
	 margin-top: -10px;
	 position: absolute;
	 top: 25px;
	 right: -22px;
}
/* role animation start */
.title-container .box .role h1 {
    color: #fdfdfd;
    font-size: 1rem;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    width: 550px;
    margin-top: 7px;
  }
  
  .title-container .box .role h1 span {
    font-size: 23px;
    margin-left: 0px;
    font-family: Ubuntu-Regular;
    width: 0;
    position: relative;
    left: 0;
  }
  /* animation span */
  .focus-in-expand-fwd {
	-webkit-animation: focus-in-expand-fwd 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: focus-in-expand-fwd 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes focus-in-expand-fwd {
	0% {
	  letter-spacing: -0.5em;
	  -webkit-transform: translateZ(-800px);
			  transform: translateZ(-800px);
	  -webkit-filter: blur(12px);
			  filter: blur(12px);
	  opacity: 0;
	}
	100% {
	  -webkit-transform: translateZ(0);
			  transform: translateZ(0);
	  -webkit-filter: blur(0);
			  filter: blur(0);
	  opacity: 1;
	}
  }
  @keyframes focus-in-expand-fwd {
	0% {
	  letter-spacing: -0.5em;
	  -webkit-transform: translateZ(-800px);
			  transform: translateZ(-800px);
	  -webkit-filter: blur(12px);
			  filter: blur(12px);
	  opacity: 0;
	}
	100% {
	  -webkit-transform: translateZ(0);
			  transform: translateZ(0);
	  -webkit-filter: blur(0);
			  filter: blur(0);
	  opacity: 1;
	}
  }
  /* animation span */
  
  .title-container .box .role .message {
    background-color: yellow;
    color: #333;
    display: block;
    font-weight: 900;
    width: 0;
    overflow: hidden;
    position: absolute;
    padding-left: 0;
    top: 6px;
    left: 130px;
    transition: 2s;
    position: absolute;
    z-index: 0;
    height: auto;
  }

  /* animation brandings */
  .scale-in-hor-left {
	-webkit-animation: scale-in-hor-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-hor-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	}

@-webkit-keyframes scale-in-hor-left {
	0% {
	  -webkit-transform: scaleX(0);
			  transform: scaleX(0);
	  -webkit-transform-origin: 0% 0%;
			  transform-origin: 0% 0%;
	  opacity: 1;
	}
	100% {
	  -webkit-transform: scaleX(1);
			  transform: scaleX(1);
	  -webkit-transform-origin: 0% 0%;
			  transform-origin: 0% 0%;
	  opacity: 1;
	}
  }
  @keyframes scale-in-hor-left {
	0% {
	  -webkit-transform: scaleX(0);
			  transform: scaleX(0);
	  -webkit-transform-origin: 0% 0%;
			  transform-origin: 0% 0%;
	  opacity: 1;
	}
	100% {
	  -webkit-transform: scaleX(1);
			  transform: scaleX(1);
	  -webkit-transform-origin: 0% 0%;
			  transform-origin: 0% 0%;
	  opacity: 1;
	}
  }
  /* animation exit */
  .scale-out-hor-left {
	-webkit-animation: scale-out-hor-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: scale-out-hor-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	}
	@-webkit-keyframes scale-out-hor-left {
		0% {
		  -webkit-transform: scaleX(1);
				  transform: scaleX(1);
		  -webkit-transform-origin: 0 0;
				  transform-origin: 0 0;
		  opacity: 1;
		}
		100% {
		  -webkit-transform: scaleX(0);
				  transform: scaleX(0);
		  -webkit-transform-origin: 0 0;
				  transform-origin: 0 0;
		  opacity: 1;
		}
	  }
	  @keyframes scale-out-hor-left {
		0% {
		  -webkit-transform: scaleX(1);
				  transform: scaleX(1);
		  -webkit-transform-origin: 0 0;
				  transform-origin: 0 0;
		  opacity: 1;
		}
		100% {
		  -webkit-transform: scaleX(0);
				  transform: scaleX(0);
		  -webkit-transform-origin: 0 0;
				  transform-origin: 0 0;
		  opacity: 1;
		}
	  }
  /* animation brandings END*/
  
  .title-container .box .role .word1, .word2, .word3, .word4, .word5 {
    font-family: Ubuntu-Bold;
  }
  
  @keyframes openclose {
	0% {
		-webkit-transform: scaleX(0);
				transform: scaleX(0);
		-webkit-transform-origin: 0% 0%;
				transform-origin: 0% 0%;
		opacity: 1;
	  }
	  100% {
		-webkit-transform: scaleX(1);
				transform: scaleX(1);
		-webkit-transform-origin: 0% 0%;
				transform-origin: 0% 0%;
		opacity: 1;
	  }
  }
  /* role animation */

 @keyframes mainBlock {
	 0% {
		 width: 0%;
		 left: 0;
	}
	 50% {
		 width: 100%;
		 left: 0;
	}
	 100% {
		 width: 0;
		 left: 100%;
	}
}
 @keyframes secBlock {
	 0% {
		 width: 0%;
		 left: -10px;
	}
	 50% {
		 width: 100%;
		 left: 0;
	}
	 100% {
		 width: 0;
		 left: 90%;
	}
}
 @keyframes mainFadeIn {
	 0% {
		 opacity: 0;
	}
	 100% {
		 opacity: 1;
	}
}
 @keyframes popIn {
	 0% {
		 width: 0px;
		 height: 0px;
		 background:yellow;
		 border: 0px solid #ddd;
		 opacity: 0;
	}
	 50% {
		 width: 7px;
		 height: 7px;
		 background: yellow;
		 opacity: 1;
		 bottom: 45px;
	}
	 65% {
		 width: 10px;
		 height: 10px;
		 bottom: 0px;
		 width: 15px;
	}
	 80% {
		 width: 12px;
		 height: 12px;
		 bottom: 20px;
	}
	 100% {
		 width: 13px;
		 height: 13px;
		 background: yellow;
		 border: 0px solid #222;
		 bottom: 13px;
	}
}
 @keyframes secFadeIn {
	 0% {
		 opacity: 0;
	}
	 100% {
		 opacity: 0.5;
	}
}
 footer {
	 width: 350px;
	 height: 80px;
	 background: #ffb510;
	 position: absolute;
	 right: 0;
	 bottom: -80px;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 animation: top 0.8s forwards;
	 animation-delay: 4s;
}
 footer span {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 font-size: 12px;
	 color: #232323;
	 font-family: 'Poppins';
}
 footer span i {
	 margin-right: 25px;
	 font-size: 22px;
	 color: #232323;
	 animation: icon 2s forwards;
	 animation-delay: 4s;
	 opacity: 0;
}
 @keyframes top {
	 0% {
		 opacity: 0;
		 bottom: -80px;
	}
	 100% {
		 opacity: 1;
		 bottom: 0px;
	}
}
 @keyframes icon {
	 0% {
		 opacity: 0;
		 transform: scale(0);
	}
	 50% {
		 opacity: 1;
		 transform: scale(1.3) rotate(-2deg);
	}
	 100% {
		 opacity: 1;
		 bottom: 0px;
	}
}