/* Global Styles */
@font-face {
	font-family: 'VerelaRound';
	src: url('VarelaRound-Regular.eot'); /* IE9 Compat Modes */
	src: url('VarelaRound-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	   
	     url('VarelaRound-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('VarelaRound-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}
@font-face {
	font-family: 'Lato';
	src: url('Lato-Bold.ttf'); /* IE9 Compat Modes */
}

html, body, p, h1, h2, h3, h4, h5, span, a{
  font-family: 'VerelaRound'!important;
}

#cargando{
  width: 100%;
  height: 100%;
  background: #010101;
  z-index: 99999999;
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

#cargando img{
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 100%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #2196F3;
  border: 1px solid #2196F3;
  transition: 0.25s all;
}

@keyframes spinner{
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.spinner {
  width: 100px;
  height: 100px;
  margin: auto;
  border-radius: 50%;
  border-top: 2px solid #2196F3;
  box-shadow: 0 -5px 5px #2196F34d;
  animation: spinner 1s linear infinite;
}

.spinner-logo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 150px;
  height: 150px;
  margin: auto;
  border-radius: 50%;
  border-top: 2px solid #FFFFFF;
  box-shadow: 0 -5px 5px #FFFFFF4d;
  animation: spinner 1s linear infinite;
}


html,
body {
  height: 100%;
  width: 100%;
  color:#7a7a7a;
  line-height:24px;
  overflow: hidden;
}
h1, .h1, h2, .h2, h3, .h3 {
margin-top: 0px;
margin-bottom: 0;
padding: 20px 0
}
p, a{
font-family: 'VerelaRound';
}
img{
max-width:100%;
}
#boxWrapp{
width:100%;
margin:0 auto;
padding:0;
overflow:hidden;
}
.build{
padding:40px 0;
margin:0;
}

.build ul{
padding:0;
margin:0;
list-style:none;
position:relative;
}
.btn-clear{
border:4px solid;
}
.btn{
font-size:14px;
}
/*on scroll show*/

/* =============================== header ===================================== */
.header{
background: url(../img/bghead.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
/* slider */

.maskHeader{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: url(../img/pattern.png);
}

#flex-head h1{
font-family: 'Lato';
font-weight:700;
font-size:60px;
margin:0;
padding:10px 0;
color:#fff;
}
#flex-head {
margin: 0 0 0;
background: transparent;
border: none;
position: relative;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow:none;
zoom: 1;
}
#flex-head h2{
font-family: 'VerelaRound';
font-size:24px;
margin:0;
padding:0 0 40px 0;
color:#fff;
}
#flex-head .slides > li{
position:relative;
}
#flex-head .flex-control-nav, #flex-head .flex-direction-nav{
display:none;
}

.main-caption{
width:100%;
position:absolute;
top:50%;
left:0;
transform: translate(0, -50%); 
-webkit-transform: translate(0, -50%); 
-moz-transform: translate(0, -50%); 
-ms-transform: translate(0, -50%); 
-o-transform: translate(0, -50%); 
text-align:center;
}

.btnAbout{
color:#fff;
font-size:14px;
box-shadow: 0 0 4px #2196F3;
}
.btnAbout:hover{
 color:#fff;   
 text-shadow: 0 0 4px #2196F3;
}
.main-caption .btn-clear{
padding:14px 24px;
}

.main-caption .btn-clear:hover{
border-color:#fff;
}

/* ==============================================================  Menu ======================================================= */
.main-nav{
position:fixed;
top:0;
display:none;
width: 100%;
min-height: 54px;
z-index:99;
}

.navbar {
border-radius: 0px;
min-height: 54px;
margin-bottom: 0px;
width: 100%;
z-index:99;
border:none;
}
a.navbar-brand {
float: left;
height: inherit;
padding: 3px 15px;
font-size: 18px;
line-height: 48px;
color:#fff;
}
.navbar-inverse .navbar-brand {
color:#fff;
}
.navbar-nav > li > a {
padding-top: 16px;
padding-bottom: 13px;
border-bottom:5px solid transparent;
font-size:14px;
text-transform:uppercase;
}

.navbar-inverse .navbar-nav > li > a {
color: #fff;
}
.navbar-inverse .navbar-nav > li.current > a {
text-decoration:none;
}
.navbar-nav > li.current > a, .navbar-inverse .navbar-nav > li > a:hover{
background:rgba(255,255,255,0.1);
}

/* ========================================= title page ==================================== */

.title-page{
color:#7a7a7a;
}
.title-page h2{
position: relative;
margin: 0 ;
z-index: 77;
padding: 0 0 5px 0;
font-size:36px;
font-weight:600;
font-family:'Lato';
}
.line-title{
width: 40px;
height: 8px;
margin: 0 auto;
}

/* Full Page Image Header Area */

.header {
  position: relative;
 
}
.linear{
 transition:all 200ms linear;   
 -webkit-transition:all 200ms linear;   
 -moz-transition:all 200ms linear;   
 -ms-transition:all 200ms linear;   
 -o-transition:all 200ms linear;   
}
/* Intro */

.page{
  padding: 40px 0;
  position:relative;
  border-bottom:5px solid #2196F3;
}
.page:last-of-type{
border-bottom:none;
padding:60px 0;
}
.page-bgcolor{
background:#f2f2f2;
}
/* ================================================= about us ================================================== */

.about-content p{
  text-align: justify;
  hyphens: auto;
  font-size:14px;
  padding-bottom:20px;
  margin:0;
}
.avatar{
 max-width:120px;   
}
.avatar img{
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.main-about img{
margin-right:20px;
}
.main-about .btn-clear{
padding: 14px 24px;
}
.main-about .btn-clear:hover{
color:#fff;
}
	/*==================progress========================*/
.progress {
height:9px;
background-color: #dadfe1;
border-radius: 0px;
-webkit-box-shadow: none;
box-shadow: none;
clear: both;
margin: 6px 0 16px 0;
overflow: inherit;
}
.progress-bar{
position:relative;
 transition:all 200ms linear !important;   
 -webkit-transition:all 200ms linear !important;   
 -moz-transition:all 200ms linear !important;   
 -ms-transition:all 200ms linear !important;   
 -o-transition:all 200ms linear !important;   
}
.wrapp-progress{
position:relative;  
padding-top: 24px;
}
.wrapp-progress p{
font-size:14px;
font-family: 'Lato', sans-serif;  
color:#444444;  
font-weight:bold;
margin:0;
padding:0;
line-height:24px;
position:absolute;
left:0;
top: 0px;
}

.precent-value{
 color:#fff;  
font-size:12px;
line-height:24px;
position:absolute;
right: -58px;
bottom: -8px;
height: 24px;
width: 50px;
background: #1d1d1d;
border-radius: 3px;
font-family: 'VerelaRound';
}
.progress-bar i{
font-size:24px;
color:#1d1d1d;
position:absolute;
right: -9px;
bottom: -8px;
}
.progress {
clear: both;
}

/* ============================================== Portfolio ================================================================= */
ul#filterOptions{
margin: 0;
padding: 40px 0 0 0;
list-style: none;
display: flex; 
flex-wrap: wrap;
justify-content: center;
}

ul#filterOptions li{
 float:left;
margin-right: -1px;
}
ul#filterOptions li span{
padding: 10px 12px;
display: block;  
color:#c4c4c4;  
padding:0 10px;
font-family: 'VerelaRound';
}
ul#filterOptions li a{
color:#FFFFFF;  
font-size:18px;
padding:0;
}
ul#filterOptions li.cur a:hover{
 color:#1d2127;   
}
ul#filterOptions li a:hover{
 text-decoration:none;
 color: #2196F3!important;
}
.folio-content{
height:auto;
}
ul.container_folio{
overflow:hidden;

}
ul.container_folio li.box{
overflow:hidden;
height:auto;
display:block;
}
.box img{
max-width:100%
}
.portfolio-item .thumbnail{
margin:0;
position:relative;
background-color: #2196F3;
}

.linear{
 transition:all 200ms linear;   
 -webkit-transition:all 200ms linear;   
 -moz-transition:all 200ms linear;   
 -ms-transition:all 200ms linear;   
 -o-transition:all 200ms linear;   
}
.thumb-img{
 position:relative;  
overflow:hidden;
background:#000;
}
.thumb-img img{
display:block;
height: 200px;
width: 100%;
object-fit: cover;

-webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;  
}
.thumb-img:hover img, .link-attr:hover .thumb-img > img{
 -webkit-transform: scale(1.05,1.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1.05,1.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;   
}
.thumb-img:hover img{
 opacity:0.65;   
}
.folio-img{
padding:15px 0;
cursor: pointer;
}
.folio-caption{
 position:absolute;
 bottom:-58px;
 left:0;
background:#2196F3;
width:100%;
max-height:48px;
}
.folio-caption p{
 color:#fff!important;
 font-weight: bold;
 padding:15px;
 margin:0;
text-align:center;
font-size:18px;
}
.folio-caption i{
position: absolute;
top: -9px;
left: 50%;
font-size: 32px;
line-height: 9px;
margin-left: -9px;
color: #2196F3;
}
.portfolio-item {
  margin: 0;
  padding:0 0;
}
.main-folio{
 margin:0 auto;
 width:100%;
padding:40px 0;
position:relative;
overflow:hidden;
}
.container_folio{
display: flex;
margin:0 0 0 0;
padding:0 0 40px 0;
list-style:none;
width:100%;
clear:both;
position: relative;
overflow: hidden;
}

.col-md-12{
 clear:both;
}
.img-portfolio {
  margin: 0;
}

div.link{
visibility:hidden;
position:absolute;
top:0;
color:#fff;
font-size:14px;
}

.thumbnail {
border-radius: 0px;
}
.link-attr{
width:60%;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%); 
-webkit-transform: translate(-50%, -50%); 
-moz-transform: translate(-50%, -50%); 
-ms-transform: translate(-50%, -50%); 
-o-transform: translate(-50%, -50%); 
text-align:center;
z-index: 88;

}
.link-attr a{

border:3px solid #fff;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-o-border-radius: 100%;
border-radius: 100%;
width: 48px;
height: 48px;
background: transparent;
padding: 12px 12px;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
color:#fff;
animation-duration: 750ms;
-webkit-animation-duration: 750ms;
-moz-animation-duration: 750ms;
-ms-animation-duration: 750ms;
-o-animation-duration: 750ms;
animation-iteration-count: backwards;   
-webkit-animation-iteration-count: backwards;   
-moz-animation-iteration-count: backwards;   
-ms-animation-iteration-count: backwards;   
-o-animation-iteration-count: backwards;   
-webkit-animation-delay: 250ms;
-moz-animation-delay: 250ms;
-ms-animation-delay: 250ms;
-o-animation-delay: 250ms;
display:none;
}
.link-attr a:hover i {
  color: #2196F3!important;
  transition-duration: 180ms;
}
.link-search{
position:absolute;
left:50%;
top:-24px;
margin-left:-55px;
}
.link-chain{
position:absolute;
right:50%;
top:-24px;
margin-right:-55px;
}
.link-attr a i{
font-size:21px;

}
/*=================contact====================*/
.main-contact{
 padding: 40px 0;
}


.contact-info p span{
width:24px;
height:24px;
text-align:center;
}
.contact-info .fa{
font-size:18px;
vertical-align:middle;
margin-right:20px;
color: white;
}

.contact p{
font-size:18px;
margin:0;
padding:0 0 0 0;
}
.contact span{
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
border: 4px solid #FFFFFF;
box-shadow: 0 0 4px #CCCCCC;
width: 60px;
height: 60px;
text-align: center;
font-size: 36px;
line-height: 53px;
margin-bottom:20px;
}

.contact p a{
color: white;
}
.contact p a:focus, .contact p a:active{
  background: none!important;
}
.contact p a:hover{
text-decoration:none;
}
/* Footer */

footer {
color: #ffffff;
padding:10px 0;
z-index: 2!important;
position:relative;
background: #000000!important;
}
.cp-right P{
margin:0;
padding:10px 0;
}
.cp-right P a{
 text-decoration:none;
}
.cp-right P a:hover{
color:#fff;
}
.top-scroll {
  margin: 0;
  padding:0;
}

.top-scroll a {
  text-decoration: none;
  color: inherit;
  display:block;
  font-size:92px;
  line-height:48px;
}
.top-scroll a:hover{
color:#fff;
}
i.scroll {
color: #fff;
position: absolute;
top: -15px;
left:50%;
margin-left: -28px;
}

i.scroll:hover {
color:#fff;
}


/* ========================================== Footer ======================================================= */
.list-inline{
text-align:right;
margin:0;
}
.list-inline > li {
display: inline-block;
padding-right: 10px;
padding-left: 10px;
}
.list-inline > li a i{
 vertical-align:middle;
 line-height: 41px;

}
.socIcon{
display:block;
animation-duration: 750ms;
  -webkit-animation-duration: 750ms;
  -moz-animation-duration: 750ms;
  -ms-animation-duration: 750ms;
  -o-animation-duration: 750ms;
  -webkit-animation-delay: 1000ms;
    -moz-animation-delay: 1000ms;
    -ms-animation-delay: 1000ms;
    -o-animation-delay: 1000ms;
        animation-iteration-count: 1;   
        -webkit-animation-iteration-count: 1;   
        -moz-animation-iteration-count: 1;   
        -ms-animation-iteration-count: 1;   
        -o-animation-iteration-count: 1;  
}
.socIcon:hover{
  color:#FFFFFF!important;
}
.itch-icon:hover{
  filter: brightness(0) invert(1);
  transition: 0.25s;
}
/* ========================================== modal ======================================================= */
body.modal-open{
margin-right: 0px !important;
 overflow:scroll ;   
}
/* ========================================== Responsive ======================================================= */



@media screen and (min-width:240px) and (max-width: 991px){
.cp-right, ul.list-inline{
 text-align:center;       
    }
i.scroll {
color: #fff;
position: relative;
top: 0;
left: 0;
margin-left: 0;
}
 .main-about img {
margin-right: 0;
}
.main-avatar{
margin-bottom:20px;
}

.about-content{
text-align:center;
}
.about-content p{
text-align:left;
}
}
@media screen and (min-width:768px) and (max-width: 991px){
.link-attr a {
width: 36px;
height: 36px;
padding: 5px 10px;
}
.link-attr a i {
font-size: 12px;
}
}
@media (min-width: 768px){
.navbar-nav {
  float: none;
}
}
@media screen and (min-width:768px) and (max-width: 1199px){
.folio-caption p{
font-size:12px;
}
}
@media screen and (min-width:240px) and (max-width: 767px){
ul.container_folio{
text-align:center;
}
    
 ul.container_folio li.box{
margin:0;
padding:0 15px;
width:100%;
max-width:380px;
display:inline-block;
float:none;
}   

.navbar ul.pull-right{
float:none !important;
}
.navbar-inverse .navbar-nav > li > a.btn, .navbar-inverse .navbar-nav > li span {
    display:none;
}

.navbar-toggle {
margin-top: 25px;
}

}
@media screen and (min-width:240px) and (max-width: 480px){
.contact p {
font-size:14px;
}
.link-attr a {
width: 36px;
height: 36px;
padding: 5px 10px;
}
.link-attr a i {
font-size: 12px;
}
}

@media screen and (min-width:768px) and (max-width: 1024px){
.logo img{
width: 12%;
}
#flex-head h1{
font-size:48px;
}
#flex-head h2{
font-size:18px;
}
.main-caption .btn-clear, .main-about .btn-clear{
padding:8px 14px;
}

.title-page h2{
font-size:24px;
}
}


@media screen and (min-width:481px) and (max-width: 767px){
footer{
     margin-bottom:0;   
}
.logo img{
width: 15%;
}
#flex-head h1{
font-size:36px;
}
#flex-head h2{
font-size:14px;
padding:0 0 8px 0;
}
.main-caption .btn-clear, .main-about .btn-clear{
padding:8px 14px;
}
.title-page h2{
font-size:18px;
}
}
@media screen and (min-width:240px) and (max-width: 480px){
.logo img{
width: 15%;
}
#flex-head h1{
font-size:24px;
}
#flex-head h2{
font-size:13.6px;
padding:0 2px 10px 2px;
}
.main-caption .btn-clear, .main-about .btn-clear{
padding:6px 14px;
}
.title-page h2{
font-size:24px;
}
}
@media screen and (max-width: 767px) and (min-width: 240px){
.navbar-toggle {
margin-top: 10px;
}
.avatar{
     margin:0 auto;   
    }

}

.logo img{
  border: 4px solid white;
  border-radius: 100%;
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: 0px 1px;
  box-shadow: 0 0 8px #2196F3;
}

html, body, #aboutMore, #work, #contact{
  background: #0c0c0c;
  color: white!important;
}

#work{
  background: radial-gradient(#090d13 15%, transparent 16%), linear-gradient(45deg, transparent 49%, #090d13 49% 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, #090d13 49% 51%, transparent 51%);
  background-size: 2em 2em;
  background-color: #000000;
  opacity: 1
}

#aboutMore{
  background: linear-gradient(45deg,transparent 34%, #090d13 35%, #090d13 40%, transparent 41%, transparent 59%, #090d13  60%, #090d13 65%, transparent 66%),linear-gradient(135deg,transparent 34%, #090d13 35%, #090d13 40%, transparent 41%, transparent 59%, #090d13  60%, #090d13 65%, transparent 66%), radial-gradient(#090d13 10%, transparent 11%), radial-gradient(circle at left,#090d13 5%, transparent 6%), radial-gradient(circle at right,#090d13 5%, transparent 6%), radial-gradient(circle at top,#090d13 5%, transparent 6%), radial-gradient(circle at bottom,#090d13 5%, transparent 6%);
  background-size: 3em 3em;
  background-color: #000000;
  opacity: 1;
}

#contact{
  background: linear-gradient(135deg, #090d1380 50%, transparent 0),linear-gradient(-135deg, #090d1380 50%, transparent 0);
  background-size: 2em 2em;
  background-color: #000000;
  opacity: 1
}

h1, h2, h3, h4, h5, p{
  color: white!important;
}

#aboutMore{
  border-top: 5px solid #2196F3;
}

#NavCol, .navbar-inverse{
  background: #000000FF!important;
}

@keyframes binarios_fondo {
  0% {opacity: 0.08}
  50% {opacity: 0.04}
  100% {opacity: 0.07}
}

#binarios_fondo {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.05;
  animation: 2.5s binarios_fondo infinite;
}

#binarios {
  opacity: 0.3;
}

.about-content .btn{
  margin: auto;
  display: block;
  width: fit-content;
}

a{
  text-decoration: none!important;
}

.contact a .fa{
  color: white;
}
.itch-icon{
  padding-left: 3px!important;
}
.itch-icon img{
  width: 28px!important;
}

.animate__delay{
  animation-delay: 0.5s;
}

.navbar .container-fluid{
  padding-right: 0px;
  padding-left: 0px;
}
a:hover, a:active{
  color: #FFFFFF!important;
}
a:focus{
  color: #FFFFFF!important;
  background-color: #2196F3;
}

@media screen and (max-width: 991px){
  .about-content p{
    text-align: justify;
    hyphens: auto;
  }
}



.texto-blink h1, .texto-blink h2{
  color: #ffffff;
  text-shadow: 0 0px 8px #2196F3, 0 0 4px #2196F3;
}
.texto-blink h1 span{
  animation: blink linear infinite 2s;
}
.texto-blink h1 span:nth-of-type(2){
  animation: blink linear infinite 3s;
}
.texto-blink h1 span:nth-of-type(3){
  animation: blink linear infinite 2.5s;
}
@keyframes blink {
  78% {
    color: inherit;
    text-shadow: inherit;
  }
  79%{
     color: #000;
  }
  80% {
    
    text-shadow: none;
  }
  81% {
    color: inherit;
    text-shadow: inherit;
  }
  82% {
    color: #000;
    text-shadow: none;
  }
  83% {
    color: inherit;
    text-shadow: inherit;
  }
  92% {
    color: #000;
    text-shadow: none;
  }
  92.5% {
    color: inherit;
    text-shadow: inherit;
  }
}

.navbar-brand img{
  width: 50px;
  height: 50px;
  border-radius: 8px;
  border: 1px solid black;
  box-shadow: 0 0 4px black;
  margin-left: 12px;
}
.navbar-brand a{
  background-color: unset!important;
}
.navbar-brand:hover{
  background-color: unset!important;
}
.modal-header{
  background: #1a3771;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
.modal-title{
  color: #fff!important;
  font-weight: bold;
  line-height: 1!important;
}
.modal-title small{
  display: block;
  margin-top: 12px;
  color: #fff;
  text-align: justify;
  hyphens: auto;
}
.modal-body a:hover, .modal-body a:active, .modal-body a:focus{
  background-color: none!important;
  background: none!important;
}
.main-avatar .avatar{
  border: 1px solid #2196F3;
  background-color: #2196F3!important;
  box-shadow: 0 0 4px #2196F3;
}

body.modal-open .modal {
  display: flex !important;
  height: 100%;
} 

body.modal-open .modal .modal-dialog {
  margin: auto;
}

#tecnologias{
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-top: 24px!important;
  justify-content: center;
  gap: 12px;
}
#tecnologias > div {
  position: relative;
  transition-duration: 0.25s;
}
#tecnologias > div > img:nth-child(2){
  width: auto;
  height: auto;
  position: relative;
}
#tecnologias > div > img:nth-child(1){
  position: absolute;
  left: 0;
  top: 0;
  filter: blur(12px);
  opacity: 0.3;
}
#tecnologias > div:hover{
  transform: scale(1.2);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #2196F3;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #2196F3AA;
  border-radius: 10px;
}


* {
	box-sizing: border-box;
}

@property --angle {
  syntax: '<angle>';
  initial-value: 90deg;
  inherits: true;
}

@property --gradX {
  syntax: '<percentage>';
  initial-value: 50%;
  inherits: true;
}

@property --gradY {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: true;
}

:root {
	--d: 2500ms;
	--angle: 90deg;
	--gradX: 100%;
	--gradY: 50%;
	--c1: #2196F3AA;
	--c2: rgba(168, 239, 255, 0.1);
}

.wrapper {
	min-width: min(40rem, 100%);
}

.portfolio-item {
	border: 0.55rem solid;
	border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
	animation: borderRotate var(--d) linear infinite;
  box-shadow: 0 0 8px #2196F3;
  border-radius: 8px;
  overflow: hidden;
  background: 
    linear-gradient(transparent 0 0) padding-box,
    linear-gradient(to right, #2196F333, #2196F333) border-box;
}


.portfolio-item:nth-child(2) {
	border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
	animation: borderRadial var(--d) linear infinite;
}

@keyframes borderRotate {
	100% {
		--angle: 450deg;
	}
}

@keyframes borderRadial {
	20% {
		--gradX: 100%;
		--gradY: 50%;
	}
	40% {
		--gradX: 100%;
		--gradY: 100%;
	}
	60% {
		--gradX: 50%;
		--gradY: 100%;
	}
	80% {
		--gradX: 0%;
		--gradY: 50%;
	}
	100% {
		--gradX: 50%;
		--gradY: 0%;
	}
}

h1, h2{
  text-shadow: 0 0 6px #2196F3;
}
p, a{
  text-shadow: 0 0 2px #2196F3;
}
p:hover, a:hover{
  text-shadow: 0 0 2px #2196F3;
}

.tooltip-inner{
  font-weight: bold;
  text-shadow: 0 0 2px #2196F3;
}

.opacity-0{
  opacity: 0;
}

@media screen and (max-width: 720px){
  .header{
    background: url(../img/bghead.jpg) no-repeat center;
  }
  .captionResponsive p {
    font-size: 15px;
  }
  .resumenContainer{
    flex-wrap: wrap;
  }
  .resumenBorder {
    border: none!important;
  }
}

.ekko-lightbox-nav-overlay a{
  width: 1px!important;
  opacity: 1;
  display: none;
}
.ekko-lightbox {
  background: rgba(0, 0, 0, 0.75);
}
.ekko-lightbox .modal-content {
  border: 2px solid #2196F3;
  box-shadow: 0 0 8px #2196F3;
  margin: 4px;
}

.contact a{
  background: transparent;
}
.contactWhatsapp {
  position:relative;
  z-index: 1!important;
}

.resumenContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap:16px; 
  height: 230px;
}

.resumenContainer h2 {
  padding-bottom: 4px;
}

.resumenBorder {
  border-right: 1px solid #2196F3AA;
  padding-right: 16px;
}

.thumbnail {
  border: 1px solid #2196F3;
}