/* Load Custom Font */
@font-face {
	font-family: 'Poppins';
	src: url('Poppins-Regular.ttf') format('truetype'), url('Poppins-Regular.ttf') format('truetype'); 
}  
body {
	color: #fff;
	background-color: #222;
	font-family: Poppins;
}
a {
	color: #fff;
}
h3 {
	opacity: 0.6;
}

/* Initialize with ES language */
#lang-en {
	display: none;
}
#language .change-to-es, #language .change-to-en {
	cursor: pointer;
	float: right;
}

/* ME */
#me .me-bio {
}
#me .me-info {
	font-size: smaller;
	.list-question {
		color: #888;
	}
}
#me .me-links {
	font-size: smaller;
}
#me .me-download .btn {
	--bs-btn-padding-y: 0.3em;
	--bs-btn-padding-x: 1em;
	box-shadow: 0px 0px 3px 1px rgb(255 255 255 / 20%);
	border: none;
}
#me .me-photo {
	display: flex;
	align-items: center;
	justify-content: center;
}
#me .me-photo img {
	max-height: 16em;
	border-radius: 50%;
	box-shadow: 0px 0px 3px 1px rgb(255 255 255 / 20%);
}

/* SKILLS */
#skills .progress {
	height: 10px;
	margin-bottom: 1.5em;
	border: 1px solid #888;
	border-radius: 1em;
	--bs-progress-bg: none;
}
#skills .progress-bar {
	background-color: #a259b5;
	margin: 2px;
	border-radius: 1em;
}
#skills .progress-bar-animated {
	animation: 1s linear(1 -1.5%, 0.50 50%) infinite progress-bar-stripes;
}
#skills .skill-percent {
	text-align: right;
	color: #888;
    font-size: small;
}
#skills .tags {
	/*font-size: smaller;*/
}
#skills .tags .badge {
	/*border: 1px solid #888;*/
	box-shadow: 0px 0px 3px 1px rgb(255 255 255 / 20%);
}

/* EXPERIENCE & EDUCATION */
#exp-edu .timeline-with-icons {
	border-left: 1px solid #fff;
	position: relative;
	list-style: none;
}
#exp-edu .timeline-with-icons .timeline-item {
	position: relative;
}
#exp-edu .timeline-with-icons .timeline-item:after {
	position: absolute;
	display: block;
	top: 0;
}
#exp-edu .timeline-with-icons .timeline-icon {
	position: absolute;
	left: -3em;
	background-color: #972db3;
	color: #fff;
	border-radius: 50%;
	height: 2em;
	width: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
}
#exp-edu .timeline-with-icons .timeline-year {
	border: 1px solid #972db3;
    border-radius: 1em;
    display: inline-block;
    padding-inline: 0.5em;
    font-size: small;
}
#exp-edu .timeline-with-icons .timeline-title {
	
}
#exp-edu .timeline-with-icons .timeline-desc {
	font-size: small;
	color: #888;
}

/* CERTIFICATES */
#certificates .certi {
	border: 1px solid #fff;
	border-radius: 5px;
	padding: 1em;
	box-shadow: 3px 3px 3px 1px rgb(255 255 255 / 20%);
}
.certi .certi-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid #fff
}
.certi .certi-logo img {
	max-height: 4em;
}
.certi .certi-desc {
    padding-left: 2em;
    padding-right: 2em;
}
.certi .certi-title {

}
.certi .certi-date {
	color: #888;
	font-size: small;
}
.certi .certi-company {
	color: #888;
}
.certi .external-link {
	font-size: small;
	float: right;
}
.certi .external-link a {
	text-decoration: none;
}

.pop.certi {
	transition: all 300ms ease-in-out;
}
.pop.certi:hover {
    transform: scale(1.03); 
}
.pop .badge {
	transition: all 100ms ease-in-out;
	-webkit-transition: all .1s;
    -moz-transition: all .1s;
    -o-transition: all .1s;
    -ms-transition: all .1s;
}
.pop .badge:hover {
	transform: translateY(-3px);
}

/* PORTFOLIO */
#portfolio .img-container:hover .overlay {
	opacity: 1;
}
#portfolio .img-container:hover img {
	opacity: 0.2;
	border: 2px solid #972db3;
}
#portfolio .img-container {
	position: relative;
	display: inline-block;
}
#portfolio .img-container img {
	transition: all 200ms ease-in-out;
	border: 2px solid #fff;
}
#portfolio .img-container .overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all 200ms ease-in-out;
}
#portfolio .overlay div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	color: #fff;
	width: inherit;
}
#portfolio .overlay div span {
	font-size: small;
	border: 1px solid #972db3;
    border-radius: 5px;
}