@import url('https://fonts.googleapis.com/css2?family=Work+Sans&family=Raleway:wght@300;500;700&display=swap');
:root {
   --rojo: brown;
   --verde: #007185;
   --morado: #7f00ff;
   --blanco: whitesmoke;
   --glitter: #E6E8FA;
   --gris-c: #f6f6f6;
   --gris: #45454b;
   --grey-3: #363636;
   --negro: #0f1111;
   --tipo-titulo: 'Raleway', sans-serif;
   --tipo-parrafo: 'Work Sans', sans-serif;
   --font-size-default: 1em;
   --ui-header-height: 3rem;
   --font-weight-default: 300;
   --text-gradient-verde: linear-gradient(
    to right, 
    hsl(185, 100%, 65%), 
    hsl(185, 100%, 28%)
  );
   --border-gradient-onyx: linear-gradient(
      to bottom right, 
      hsl(0, 0%, 75%) 0%, 
      hsla(0, 0%, 25%, 0) 50%
   );
   --shadow-1: 0 4px 10px rgb(0 0 0 / 10%);
   --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
   --shadow-3: 0 15px 45px -20px rgba(0, 0, 0, .5);
}
* {
   margin: 0;
   padding: 0;
   border: 0;
   box-sizing: border-box;
}
*::-webkit-scrollbar {
   display: none;
}
* {
   scrollbar-width: none;
}
html {
   scroll-behavior: smooth;
}
img, figure{
   max-width: 100%;
   height: auto;
   border: 0px;
   object-fit: cover;
   object-position: center;
}
h1, h2, h3, h4, h5, h6 {
   color: inherit;
   line-height: 1.5rem; 
   word-wrap: break-word;
}
html {
   scroll-behavior: smooth;
}
body {
   color: var(--gris);
   font-family: var(--tipo-parrafo);
   font-size: var(--font-size-default);   
   font-weight: var(--font-weight-default);
   min-height: 100vh;
}
a {
   color: inherit;
   display: block;
   text-decoration: none;
}
a:hover {
   color: #64d3ee;
   text-decoration: none !important;
}
ul, li {
   list-style-type: none;
   background: transparent;
}
img, figure {
   max-width: 100%;
   height: auto;
   object-fit: cover;
   object-position: center;
   align-items: center;
}
img.perfil {
   height: 180px;
   width: 180px;
   border-radius: 50%;
}
p {
   margin: 0 10px 20px;
}
i {margin: .4em;}
span {
   font-style: italic;
   font-weight: 500;
}
.bg {
   max-height: 100vh;
   background-size: 370% 370% !important;
   animation: bggradient 30s ease-in-out infinite;
   background: linear-gradient(to right, #0a64df, #5638e5, #7f00ff);
 } 
 @keyframes bggradient {
   0% {
     background-position: 0% 50%;
   }
   50% {
     background-position: 100% 50%;
   }
   100% {
     background-position: 0% 50%;
   }
 }
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   min-height: 4rem;
   background: #0a64df; /* fallback for old browsers */
   background: linear-gradient(to right, #0a64df, #1196ba, #7f00ff);
   color: #fff;
   display: flex;
   flex-flow: row;
   box-shadow: var(--shadow-1);
}
.header .h2 {
   margin: .5rem 1rem 1rem;
}
.nav {
  	max-width: 90%;
   min-width: 768px;
	padding: 15px 20px;
   margin: auto;
}
.nav .ul {
   display: flex;
   flex-wrap: wrap;
   position: absolute;
   right: 0;
}
.nav .li {
   margin: 0 1em;
   gap: 1rem;
   list-style: none;
}
.main {
   width: 100%;
}
.seccion {
   background: #fff;
   border-radius: 16px;
   min-height: 100vh;
   margin: 1em;
   padding: 2em;
   text-align: center;
}
.seccion .ul .li {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   align-items: center;
}
.contact .ul .li {
   display: flex;
   margin-left: .4em;
   text-align: left;
}
.container {
   margin: auto;
   padding: 1rem;
}
.container .h2 {
   font-family: var(--tipo-titulo);
   text-transform: uppercase;
   text-align: center;
   font-size: 1.7em;
   color: var(--verde);
   padding: 1rem;
}
.container .h3 {
   font-family: var(--tipo-titulo);
   font-size: 1.5em;
   font-style: italic;
   margin-bottom: 1.5rem;
}
p.text-center {
   font-size: .75rem;
   padding: .5rem;
}
.timeline-item-title {
   font-family: var(--tipo-titulo);
   font-size: 1.15em;
   text-align: center;
}
.content-card {
	/*background: var(--border-gradient-onyx);*/
	padding: 1rem 2rem;
	border-radius: 16px;
	box-shadow: var(--shadow-2);
	cursor: pointer;
}
.title-wrapper {
   color: var(--verde);
	display: flex;
	align-items: center;
	gap: 5px;
	margin-bottom: .4rem;
}
.title-wrapper data {
	color: var(--grey-3);
   font-family: var(--tipo-titulo);
	font-size: 15px;
	font-weight: 300;
}
.skill-progress-bg {
	background: #e9e5df;
	width: 100%;
	height: .75rem;
	border-radius: 4px;
   margin-bottom: 1rem;
}
.skill-progress-fill {
	background: var(--text-gradient-verde);
	height: 100%;
	border-radius: inherit;
}
.rrss {
   width: 100%;
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   align-items: center;
   margin: 2rem 0;
}
.rrss .li {
   margin: 0 1em;
}
svg[class*="about"]{
   width: 1.5rem;
   height: auto;
}
.footer {
   background: #e9e5df;
   padding: 1em 0;
   text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
   
   .container {
      max-width: 90%;
   }

}
.slider {
   margin-bottom: 1.2rem;
   position: relative;
   overflow: hidden;
}
.slider .owl-item.active.center .slider-card {
   transform: scale(1.15);
   opacity: 1;
   background: var(--verde); /* fallback for old browsers */
   background: linear-gradient(to bottom right, #007185, #5fddf0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   color: #fff;
}
.slider-card {
   background: #fff;
   padding: 0px 0px;
   margin: 50px 15px 90px 15px;
   border-radius: 5px;
   box-shadow: var(--shadow-3);
   transform: scale(0.9);
   opacity: 0.5;
   transition: all 0.3s;
}
.slider-card img {
   border-radius: 5px 5px 0px 0px;
}
.owl-nav button {
   background: #e9e5df !important;
   border-radius: 16px;
}
.owl-nav .owl-prev {
   position: absolute;
   top: calc(50% - 25px);
   left: 0;
   opacity: 1;
   font-size: 30px !important;
   z-index: 1;
}
.owl-nav .owl-next {
   position: absolute;
   top: calc(50% - 25px);
   right: 0;
   opacity: 1;
   font-size: 30px !important;
   z-index: 1;
}
.owl-dots {
   text-align: center;
}
.owl-dots .owl-dot {
   height: 10px;
   width: 10px;
   border-radius: 10px;
   background: #e9e5df !important;
   margin-left: 3px;
   margin-right: 3px;
   outline: none;
}
.owl-dots .owl-dot.active {
   background: var(--verde) !important;
}
#inicio {
   padding-top: 4rem;
}