@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
.uk-navbar-container:not(.uk-navbar-transparent){
	/*	background: url(../../../images/header-1.png) repeat-x #000;z-index: 999;*/
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#202020+0,1a1a1a+50,1a1a1a+50,121212+51,020202+100 */
	background: #202020; /* Old browsers */
	background: -moz-linear-gradient(top, #202020 0%, #1a1a1a 50%, #1a1a1a 50%, #121212 51%, #020202 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #202020 0%,#1a1a1a 50%,#1a1a1a 50%,#121212 51%,#020202 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #202020 0%,#1a1a1a 50%,#1a1a1a 50%,#121212 51%,#020202 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#202020', endColorstr='#020202',GradientType=0 ); /* IE6-9 */
	border-bottom: 1px solid #333333;
    	
}
.uk-navbar-left .uk-navbar-nav>li:nth-child(n+2)>a, .uk-navbar-left .uk-navbar-item, .uk-navbar-left, .uk-navbar-left .uk-navbar-nav{
	border: none !important;
}

.uk-navbar-nav>li:hover>a, .uk-navbar-nav>li>a[aria-expanded=true] {
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 255, 255, .8);
    background-image: none!important;
     box-shadow: none !important; 
}
.uk-navbar-nav>li>a{
	text-transform: uppercase !important;
	    font-size: .875rem;
}

.uk-navbar-nav>li.uk-active>a{

	background: url(../../../images/highlight.png) no-repeat bottom !important;
     box-shadow: none !important; 
}

#portfolio-module-115 .projects-wrapper .project-img .project-img-extra {
    background: rgba(0,0,0,.6 ) !important;
}

.projects-wrapper .project-img .project-img-extra .project-icon{
	margin: 0px 5px;
}
.uk-section-default{background-image: none !important;}

.h-text1{
	color: #fff;	
	transition: color ease-out 0.3s, text-shadow ease-out 0.3s;
    text-shadow: 0 0 1rem rgba(0,161,250,0.4);
    font-size: 24px;
    line-height: 23px;
    margin-bottom: 20px;
    border-bottom: 1px solid #3FA9F5;
    padding-bottom: 10px;
    text-transform: uppercase;
}
.text1{
	font-weight: bold;
	text-transform: uppercase;
	color: #3FA9F5;
	font-size: 30px;
	letter-spacing: 1px;
	line-height: 30px;
	transition: color ease-out 0.3s, text-shadow ease-out 0.3s;
    text-shadow: 0 0 1rem rgba(0,161,250,0.4);
}
.text2{
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	font-size: 40px;
	letter-spacing: 1px;
	line-height: 40px;
}
.text2 span{
	color: #3FA9F5;
	transition: color ease-out 0.3s, text-shadow ease-out 0.3s;
    text-shadow: 0 0 1rem rgba(0,161,250,0.4);
}
.text3, .text6{
	color: #808080;
	font-size: 16px;
	letter-spacing: .5px;
	font-weight: 500;
	text-transform: uppercase;
}	

.text4{
	font-weight: bold;
	text-transform: uppercase;
	color: #fff;
	font-size: 40px;
	letter-spacing: 1px;
	line-height: 40px;
	margin-bottom: 25px;
}
.text4 span{
	color: #3FA9F5;
	transition: color ease-out 0.3s, text-shadow ease-out 0.3s;
    text-shadow: 0 0 1rem rgba(0,161,250,0.4);
}
.text5{
	font-weight: bold;
	text-transform: uppercase;
	color: #3FA9F5;
	font-size: 30px;
	letter-spacing: 1px;
	line-height: 30px;
	transition: color ease-out 0.3s, text-shadow ease-out 0.3s;
    text-shadow: 0 0 1rem rgba(0,161,250,0.4);
}

.text7{
	margin-top: 5px;
}
.text8{
	color: #fff;
	transition: color ease-out 0.3s, text-shadow ease-out 0.3s;
	letter-spacing: 1px;
    text-shadow: 0 0 1rem rgba(0,161,250,0.4);
    font-weight: 	bold;
    border-bottom: 1px solid #3FA9F5;
    margin-bottom: 	15px;
    text-transform: 	uppercase;
    font-size: 	18px;
}
.text9{
	color: #3FA9F5;
	transition: color ease-out 0.3s, text-shadow ease-out 0.3s;
	letter-spacing: 1px;
    text-shadow: 0 0 1rem rgba(0,161,250,0.4);
    font-weight: 	bold;
    margin-bottom: 	0px;
    text-transform: 	uppercase;
    font-size: 	28px;
    margin: 0px;
}
.text10{
    color: #fff;
    transition: color ease-out 0.3s, text-shadow ease-out 0.3s;
    letter-spacing: 1px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 1), 0 0 5px rgba(255, 255, 255, 0.4);
    font-weight:    bold;
    margin-bottom:  15px;
    font-size: 3.9vw;
    margin: 0px;
    line-height: 3.9vw;
}
.custom-btn {
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
}

/* 3 */
.btn-3 {
  width: 140px;
  height: 50px;
  padding: 0;
  background: #1e87f0 !important;
  border-radius:  0px 0px 0px 0px !important;
  color: #fff;

  
}
.btn-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: 	#3FA9F5;
  transition: color ease-out 0.3s, box-shadow ease-out 0.3s;
/*  box-shadow: 0 0 1rem #0cf;*/
  transition: all 0.8s ease;
}
.btn-3:before {
  height: 0%;
  width: 2px;
}
.btn-3:after {
  width: 0%;
  height: 2px;
}
.btn-3:hover{
   background: transparent;
  box-shadow: none;
  color: #3FA9F5 !important;
  background: none !important;
}
.btn-3:hover:before {
  height: 100%;
}
.btn-3:hover:after {
  width: 100%;
}
.btn-3 span:hover{
   color: #fff;
}
.btn-3 span:before,
.btn-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
    background: 	#3FA9F5;
  transition: color ease-out 0.3s, box-shadow ease-out 0.3s;
/*  box-shadow: 0 0 1rem #0cf;*/
  transition: all 0.8s ease;
}
.btn-3 span:before {
  width: 2px;
  height: 0%;
}
.btn-3 span:after {
  width: 0%;
  height: 2px;
}
.btn-3 span:hover:before {
  height: 100%;
}
.btn-3 span:hover:after {
  width: 100%;
}
.projects-filter{border: none;}
.projects-filter a{
	font-size: 18px !important;
	margin-right: 10px !important;
	text-transform: uppercase;
}
.projects-filter > a:last-child{
	margin-right: none !important;
}
.back.skillbar{
    background-color: #000;
    border: 1px solid rgba(0,0,0,0.3);
    box-shadow: 0 0 5px rgba(0,161,250,0.4);
    border-radius: 0 0px 0px 0;
    font-size: 12px;
}
.skill {
    background:  #2187e7;;
    text-align: right;
    border-radius:  0 0px 0px 0;
    color: #fff;
    line-height:  20px;
    margin: 1px 1px 1px 0px;
}
.skill span{margin-right: 10px;}

.uk-card-default-1 {
  margin: 0 20px;
  padding: 20px 40px;
  position: relative;
  background-color: #000;
  color: #3FA9F5;
  letter-spacing: 2px;
  font-weight: 700;
  text-transform: uppercase;
  outline: none;
  cursor: pointer;
}

.uk-card-default-1:first-of-type {
  margin-left: 0px;
}

.uk-card-default-1:last-of-type {
  margin-right: 0px;
}

.uk-card-default-1:hover {
  position: relative;
  
/*  background-color: #222;*/
  color: whitesmoke;
  animation: 0.07s flicker;
  animation-iteration-count: 2;
  transition: all 0.35s cubic-bezier(0.75, 0, 0.25, 1);
}

.uk-card-default-1:focus {
  background-color: #076552;

}
.uk-card-default-1 .servicesdescription{
    text-transform: none !important;     
    font-weight: normal !important;
    display:  block;
    font-size: 15px;
    color: #808080 !important;
     letter-spacing: 0px;
    text-align: justify;
    text-shadow: 1px 1px 2px #000000;

}

.uk-card-default-1 .servicestitle{
    margin-bottom:  8px;
    display:  block;
    font-size: 20px;
    color: #fff;
    letter-spacing: 1px;
     letter-spacing: 0px;
    font-weight:    bold;
    text-align: center;
    text-shadow: 1px 1px 2px #000000;
   
}       
.decorator {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid transparent;
  animation: 0.1s flicker;
  animation-iteration-count: 3;
  transition: all 0.35s cubic-bezier(0.75, 0, 0.25, 1);
}

.decorator.top {
  top: -1px;
  border-top: 1px solid #3FA9F5;
}

.decorator.bottom {
  bottom: -1px;
  border-bottom: 1px solid #3FA9F5;
}

.decorator.left {
  left: -1px;
  border-left: 1px solid #3FA9F5;
}

.decorator.right {
  right: -1px;
  border-right: 1px solid #3FA9F5;
}

.uk-card-default-1:hover .decorator.top {
  top: -16px;
  border-top: 1px solid #3FA9F5;
}

.uk-card-default-1:hover .decorator.bottom {
  bottom: -16px;
  border-bottom: 1px solid #3FA9F5;
}

.uk-card-default-1:hover .decorator.left {
  left: -16px;
  border-left: 1px solid #3FA9F5;
}

.uk-card-default-1:hover .decorator.right {
  right: -16px;
  border-right: 1px solid #3FA9F5;
}
.uk-modal-dialog{background: none !important;}
.uk-modal{
	background: rgba(0,0,0,.8);
	height: 100vh !important;
  	width: 100vw !important;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: rgba(34, 47, 62, 0.2);
  box-shadow: 0 0 24px 4px rgba(45, 160, 206, 0.2);
  border-radius: 50%;
  text-align: center;
  overflow: hidden;

  &:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border-radius: 50%;
    background-image: radial-gradient(
      circle,
      transparent 68%,
      rgba(45, 160, 206, 1) 70%
    );
    box-shadow: inset 0 0 0 0 rgba(45, 160, 206, 0);
    animation: Glow 5s infinite ease-in-out;
  }

  &:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0);
    transform-origin: 50% 50%;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    z-index: 999;
    border: solid 2px #13B9CF;
    border-radius: 50%;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
    animation: Spin 1.5s infinite linear;
  }
}
::selection {
  background: #1e87f0 !important;
  color: white;
}
a#uk-switcher-3.uk-active{
	color: #fff;
	text-shadow: 0 0 1rem rgba(0, 161, 250, 0.4);

}
.loader-text-validate,
.loader-text-send{
  letter-spacing: 8px !important;
}
.loader-text {
  display: block;
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  color: rgba(45, 160, 206, 1);
  letter-spacing: 12px;
  text-shadow: 0 0 24px rgba(45, 160, 206, 0.8);
  animation: Pulse 5s infinite linear;

  &:before {
    content: attr(data-flicker-0);
    position: absolute;
    left: 0;
    color: rgba(45, 160, 206, 1);
    opacity: 0;
    text-shadow: 0 0 16px rgba(45, 160, 206, 0);
    animation: Flicker 3s infinite linear;
  }

  &:after {
    content: attr(data-flicker-1);
    position: absolute;
    right: 0;
    color: rgba(45, 160, 206, 1);
    opacity: 0;
    text-shadow: 0 0 16px rgba(45, 160, 206, 0);
    animation: Flicker 3s infinite linear;
    animation-delay: 0.5s;
  }
}
#modal-full-thankyou .uk-modal-dialog{width: 800px !important}
#modal-full-thankyou{background: rgba(0,0,0,.9);}
#rsfp_thankyou_popup_inner{width: 70% !important;}
.rsform-block {margin: 35px 0px;}
.rsform-block-first-name{margin-top: 10px !important;}
.uk-form-stacked .uk-form-label{
	display: inline-block;
	padding: 2px 40px 2px 10px;
	background: #1e87f0;
	margin-bottom: 0px;
	background: linear-gradient(-125deg, transparent 20px, rgba(30,135,250,1) 0) !important;
	text-transform: uppercase;
	font-size: 14px;
}
.form-control:where(input):focus, .form-control:where(textarea):focus, .form-select:where(select):focus, .uk-input:focus, .uk-select:focus, .uk-textarea:focus, .uk-form-danger, .uk-form-danger:focus, .form-control:where(input):focus, .form-control:where(textarea):focus, .form-select:where(select):focus, .uk-input:focus, .uk-select:focus, .uk-textarea:focus, .form-control:where(textarea), .form-select:where(select)[multiple], .form-select:where(select)[size], .uk-select[multiple], .uk-select[size], .uk-textarea, .form-control:where(input):focus, .form-control:where(textarea):focus, .form-select:where(select):focus, .uk-input:focus, .uk-select:focus, .uk-textarea:focus, .form-control:where(input), .form-select:not([multiple])[size='1'], .form-select:where(select):not([multiple]):not([size]), .uk-input, .uk-select:not([multiple]):not([size]){
	border: none !important;
}
.uk-form-danger, .uk-form-danger:focus{
	box-shadow: none !important;
	color: #fff !important;
}
.rsfp_thankyou_popup_outer{background: rgba(0,0,0,.9);}
.rsfp_thankyou_popup_inner{background: none !important;}
#rsform_error_3 .formRed{display: none !important;}
.form-control:where(input):focus, .form-control:where(textarea):focus, .form-select:where(select):focus, .uk-input:focus, .uk-select:focus, .uk-textarea:focus,
.form-control:where(input):focus, .form-control:where(textarea):focus, .form-select:where(select):focus, .uk-input:focus, .uk-select:focus, .uk-textarea:focus,
.form-control:where(textarea), .form-select:where(select)[multiple], .form-select:where(select)[size], .uk-select[multiple], .uk-select[size], .uk-textarea,
.form-control:where(input):focus, .form-control:where(textarea):focus, .form-select:where(select):focus, .uk-input:focus, .uk-select:focus, .uk-textarea:focus,
.form-control:where(input), .form-select:not([multiple])[size='1'], .form-select:where(select):not([multiple]):not([size]), .uk-input, .uk-select:not([multiple]):not([size]){
	-webkit-border-radius: 0px 0px 0px 0px !important;
	-moz-border-radius: 0px 0px 0px 0px !important;
	-o-border-radius: 0px 0px 0px 0px !important;
	border-radius: 0px 0px 0px 0px !important;
	/*	box-shadow: 0px 0px 0px 1px rgba(30,135,240,0.75);
	-webkit-box-shadow: 0px 0px 0px 1px rgba(30,135,240,0.75);
	-moz-box-shadow: 0px 0px 0px 1px rgba(30,135,240,0.75);*/
	border: 1px solid #1e87f0 !important;
	box-shadow: none !important;
}
#contact .uk-heading-bullet{
	font-size: 28px;
	padding-bottom: 0px !important;
	margin-bottom: 25px;
	color: #fff;
	font-weight: bold;
}
.uk-heading-bullet::before{
	border-color: #3FA9F5 !important;
}

/*
 *  STYLE 3
 */

::-webkit-scrollbar-track
{
/*  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
  background-color: #F5F5F5;
}

::-webkit-scrollbar
{
  width: 8px;
  background-color: rgba(250,250,250,0);
}

::-webkit-scrollbar-thumb
{
  background-color: #3FA9F5;
}
.uk-link-toggle:hover .uk-link, .uk-link:hover, a:hover{
    color: #3FA9F5;
    transition: color ease-out 0.3s, text-shadow ease-out 0.3s;
    text-shadow: 0 0 1rem rgba(0, 161, 250, 0.4);
}
#contact a{
  color: rgba(255, 255, 255, .7);
}
#contact i{
    color: #3FA9F5;
     text-shadow: 0 0 1rem rgba(0, 161, 250, 0.4);
     font-size: 28px;
     margin-right: 10px !important;
}
.uk-navbar .uk-navbar-right{
    border: none !important;
    width: 470px !important;
    position: relative;
    color: rgb(101, 195, 247);
   background: url(../../../images/header.png) no-repeat center left;
   top: 5px;
}
/*div#contact{
  width: 100% !important;
    position: relative;
   background: url(../../../images/contact_us_baner.jpg) no-repeat top right !important;

}*/
.uk-navbar .uk-navbar-right > div{margin-top: 20px;margin-left: 105px;font-size: 18px;}
.uk-navbar .uk-navbar-right i{
  font-size: 26px;
  margin-right: 5px;
}
.uk-navbar-right .uk-navbar-toggle{border: none !important;}
/** {
  cursor: none;
}*/

/* Cursor design */
.Cursor {
  pointer-events: none;
  position: fixed;
  display: block;
  border-radius: 0;
  transform-origin: center center;
  mix-blend-mode: difference;
  top: 0;
  left: 0;
  z-index: 9999999999999999;
  filter: url("#goo");
}

.Cursor span {
  position: absolute;
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 20px;
  background-color: #fff;
  transform-origin: center center;
  transform: translate(-50%, -50%);
}

@keyframes entrance {
  to, 20%, 40%, 60%, 80% {
    opacity: 1;
  }
  from, 10%, 30%, 50%, 70%, 90% {
    opacity: 0;
  }
}
@keyframes Glow {
  50% {
    box-shadow: inset 0 0 24px 4px rgba(45, 160, 206, 0.8);
  }
}

@keyframes Spin {
  50% {
    opacity: 0.2;
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes Pulse {
  50% {
    color: rgba(45, 160, 206, 0.5);
    text-shadow: 0 0 24px rgba(45, 160, 206, 0.4);
  }
}

@keyframes Flicker {
  0% {
    opacity: 0.1;
    color: rgba(45, 160, 206, 1);
    text-shadow: 0 0 16px rgba(45, 160, 206, 1);
  }
  2% {
    opacity: 1;
    color: #fff;
    text-shadow: 0 0 24px rgba(45, 160, 206, 1);
  }
  6% {
    opacity: 0.1;
    color: rgba(45, 160, 206, 1);
    text-shadow: 0 0 8px rgba(45, 160, 206, 1);
  }
  12% {
    opacity: 0.8;
    color: #fff;
    text-shadow: 0 0 8px rgba(45, 160, 206, 1);
  }
  14% {
    opacity: 0.2;
    color: rgba(45, 160, 206, 1);
    text-shadow: 0 0 8px rgba(45, 160, 206, 1);
  }
  30% {
    opacity: 1;
    color: #fff;
    text-shadow: 0 0 16px rgba(45, 160, 206, 1);
  }
  36% {
    opacity: 0.2;
    color: rgba(45, 160, 206, 1);
    text-shadow: 0 0 24px rgba(45, 160, 206, 1);
  }
  60% {
    opacity: 0.6;
    text-shadow: 0 0 16px rgba(45, 160, 206, 1);
  }
  64% {
    opacity: 0.8;
    text-shadow: 0 0 18px rgba(45, 160, 206, 1);
  }
  68% {
    opacity: 1;
    text-shadow: 0 0 24px rgba(45, 160, 206, 1);
  }
  82% {
    opacity: 0.2;
    text-shadow: 0 0 16px rgba(45, 160, 206, 1);
  }
  84% {
    opacity: 0.1;
    text-shadow: 0 0 8px rgba(45, 160, 206, 1);
  }
  86% {
    opacity: 0.6;
    text-shadow: 0 0 12px rgba(45, 160, 206, 1);
  }
}

@keyframes flicker {
  0%, 50% {
    opacity: 0;
  }
  51%, 100% {
    opacity: 1;
  }
}

#demo {
  font-family: monospace; /* Asegura que todos los caracteres tengan el mismo ancho */
  white-space: pre; /* Preserva los espacios y saltos de línea */
  overflow: hidden; /* Oculta el texto hasta que comience el efecto */
}

/* Define la animación 'type-text' para la escritura tipo máquina de escribir */
@keyframes type-text {
  from { width: 0; }
}

#demo::after {
  content: "|"; /* Crea el cursor inicial */
  display: inline-block;
  width: 0; /* Inicia con un ancho de 0 para el cursor */
  animation: type-text 2s steps(30) infinite; /* Ajusta la duración y el número de pasos para el cursor */
  animation: blink-caret 1s step-end infinite; /* Agrega una animación para que el cursor parpadee */
}

/* Define la animación 'blink-caret' para el parpadeo del cursor */
@keyframes blink-caret {
  from, to { border-color: transparent; }
  100% { border-color: red; } /* Cambia el color del cursor a verde (puedes ajustar el color) */
}

@media (min-width: 900px) and (max-width: 1445px) {
  .uk-navbar-nav>li>a{padding: 0 15px;}
}
/*@media (max-width: 1300px) {
  header.tm-header{
      display: none !important; 
    }
}
@media (min-width: 1300px) {
    header.tm-header-mobile{display: block;}
}*/
@media (max-width: 1200px) {
  .uk-navbar .uk-navbar-right{
    width: auto !important;
    background: none !important;
  }
  #home .uk-panel.uk-width-1-1{margin-top: 20px;}
}
@media (max-width: 960px) {
  #contact .uk-margin-top.uk-flex.uk-flex-center.uk-flex-middle > div.uk-width-4-5{
    width: 100% !important;
  }
  .text10{
    font-size: 4.9vw;
    line-height: 4.9vw;
  }
  .text5{
    font-size: 4.9vw;
    line-height: 4.9vw;
  }
}
@media (max-width: 510px) {

}
@media (max-width: 400px) {

}