/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


.img-full {
	width: 100%;
}

.see-m {
	position: absolute;
}

.see-m-bottom {
	bottom: 5vh;
}

.see-m-right {
	right: 5vh;
}

.see-m-top {
	top: 5vh;
}

.see-m-left {
	left: 5vh;
}

.see-m-center{
	margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0;
}

.see-m .btn-lg {
	padding: 1rem 1.5rem;
	font-size: 1.75rem;
	line-height: 2;
	border-radius: 0.4rem;
}

@media (max-width:769px) {
	.see-m .btn-lg {
		padding: .5rem 1rem;
		font-size: 1rem;
		line-height: 1;
		border-radius: 0.2rem;
	}
}

/*hover for portfolio*/
.producto-item-wrapper {
	display: none;
}

.producto-item-wrapper.show {
	display: block;
}

.producto-wrapper {
	position: relative;
}

.producto-img {
	background-color: #1db6e5;
}

.producto-img figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #141d33;
	color: #fff;
	/* overflow: hidden; */
	width: 100%;
	height: 100%;
	transition: .5s ease;
	padding: .5rem;
	font-size: large;
	opacity: 0;
	word-wrap: break-word;
	word-break: break-all;
}

.producto-img:hover figcaption {
	opacity: 1;
}

/*border*/
.producto .border-animation,
.producto .border-inner{
	box-sizing: border-box;
}

.producto .border-animation {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	transform: scale(1, 0.8);
	border: solid .3em transparent;
}

.producto .border-inner {
	position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0.8em;
    z-index: 1;
    border: solid -0.7em transparent;
    background: #141d33;
}

.producto .border-animation::before,
.producto .border-animation::after {
	content: '';
	position: absolute;
    background: #fff;
}

.producto .border-animation:focus::before,
.producto .border-animation:hover::before {
	animation: beforeBorders .5s forwards ease-in-out;
}

.producto .border-animation:focus::after,
.producto .border-animation:hover::after {
	animation: afterBorders .5s forwards ease-in-out;
}

.producto .border-animation:hover,
.producto .border-animation:focus {
	animation: borderColors .5s steps(1) forwards;
	outline: none;
	
}

/*border-animate*/

@keyframes beforeBorders {
	0% {
	  top: calc(.3em * -1);
	  left: 50%;
	  bottom: auto;
	  right: auto;
	  width: 0;
	  height: .3em;
	}
	33% {    
	  top: calc(.3em * -1);
	  left: calc(.3em * -1);
	  bottom: auto;
	  right: auto;
	  width: calc(.3em + 50%);
	  height: .3em;
	}
	66% {
	  top: calc(.3em * -1);
	  left: calc(.3em * -1);
	  bottom: auto;
	  right: auto;
	  width: .3em;
	  height: calc((.3em * 2) + 100%);
	}
	100% {
	  top: auto;
	  left: calc(.3em * -1);
	  bottom: calc(.3em * -1);
	  right: auto;
	  width: calc(.3em + 50%);
	  height: calc((.3em * 2) + 100%);
	}
  }
  
  @keyframes afterBorders {
	0% {
	  top: calc(.3em * -1);
	  left: auto;
	  bottom: auto;
	  right: 50%;
	  width: 0;
	  height: .3em;
	}
	33% {    
	  top: calc(.3em * -1);
	  left: auto;
	  bottom: auto;
	  right: calc(.3em * -1);
	  width: calc(.3em + 50%);
	  height: .3em;
	}
	66% {
	  top: calc(.3em * -1);
	  left: auto;
	  bottom: auto;
	  right: calc(.3em * -1);
	  width: .3em;
	  height: calc((.3em * 2) + 100%);
	}
	100% {
	  top: auto;
	  left: auto;
	  bottom: calc(.3em * -1);
	  right: calc(.3em * -1);
	  width: calc(.3em + 50%);
	  height: calc((.3em * 2) + 100%);
	}
  }
  
  @keyframes borderColors {
	0% {
	  border-top-color: transparent;
	  border-right-color: transparent;
	  border-bottom-color: transparent;
	  border-left-color: transparent;
	}
	33% {
	  border-top-color: #fff;
	  border-right-color: transparent;
	  border-bottom-color: transparent;
	  border-left-color: transparent;
  
	}
	66% {
	  border-top-color: #fff;
	  border-right-color: #fff;
	  border-bottom-color: transparent;
	  border-left-color: #fff;
	}
	100% {
	  border-top-color: #fff;
	  border-right-color: #fff;
	  border-bottom-color: #fff;
	  border-left-color: #fff;
	}
  }