@import url('https://fonts.googleapis.com/css?family=Muli:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i&display=swap');
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 

:root {
    --primary-color: #333;
    --secondary-color: #b39a49;
}

::-moz-selection {
    color: #fff;
    background: var(--primary-color)
}

::selection {
    color: #fff;
    background: var(--primary-color)
}

::-moz-selection {
    color: var;
    background: var(--primary-color)
}



body {  
    font-family: 'Muli', sans-serif;

}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-bottom: .5rem;
    font-weight: 600;
    line-height: 1.64;
}

.a {
    text-decoration: none;color:#222;   
    cursor: pointer
}

.a:hover {
    text-decoration: none;
    color: var(--primary-color);
}

.a.link {
    position: relative;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.a.link::before {
    content: '';
    width: 100%;
    height: 2px;
    background: #d9d9d9;
    position: absolute;
    bottom: -4px;
    left: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.a.link:hover {
    color: #eee
}

.a.link:hover::before {
    background: #000
}

.space-md {
    width:100%;
    padding-top: 20px;
    padding-bottom: 20px
        padding-left: 0px
        padding-right: 0px
}

  

.side-content_70{
    width:78%;float: left;
}

.side-content_30{
    width:20%;
    border-left: 0px solid #000;
    margin-left:1.5%;
    padding:0%; 
    float: right;
   
}

.herob-image {
  background-color:#fafafa;
    height:40px; 
       padding-bottom:2px;
    padding-top:2px;
     padding-left:0px;
    padding-right:0px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    position: relative;
    border-radius: 5px; /* Rounded corners */
   
}
    
.herob-text {
    padding-top:3px;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #222;
}
 

.herow-image {
  background-color:#252525;
  height:40px; 
     padding-bottom:2px;
    padding-top:2px;
     padding-left:0px;
    padding-right:0px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
    position: relative;
    border-radius: 5px; /* Rounded corners */
   
}
    
.herow-text {
     padding-top:3px;
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}


i {  
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;margin-bottom:2px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
  
/*/////////////////////
Header intro 
///////////////////////*/
.scroll-reveal {
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}



.hidden-text {  
  opacity: 0;
  transition: opacity 0.5s ease;
}

.visible-text {
  opacity: 1;
}


.headline {
    position: relative;
    margin-bottom: 5px;
    margin-top: 5px;
}

.headline-content {
    display: block;
    position: relative;
}

.headline-content .headline-title {
    font-weight: 900;
  
}
}

.headline-subtitle {
    font-size: 14px
}


/* Portfolio */

#portfolio-filters {    
    margin-bottom: 5px;   
}

/* portfolio filter */

#filters li {
    display: inline-block;
    margin-right: 5%;padding-bottom:3px;margin-bottom:10px;
 
}

#filters li:last-child {
    margin-right: 0  ;
   
}

#filters li a {
     display: inline;
    font-size: 10px;
    font-weight: 500;color: #444;
    position: relative;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    font-weight: 500;
     font-size:0.95em;
     font-family: "Momo Trust Display", sans-serif;
}

#filters li a::after {
    content: '';
    width: 0;
    height: 2px;
    position: absolute;
    bottom: -6px;
    left: 0;
    background: #222;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

#filters li a:hover,
#filters li a.active {
    color: #555;
}

#filters li a:hover::after,
#filters li a.active::after {
    width: 100%
}


.project-intro li {
    font-size: 14px;
    color: #555;
    padding: 7px 0 8px;
    border-bottom: 0px solid rgba(0, 0, 0, 0.2);
    max-width: 250px
}

.project-intro li.title {
    font-weight: 700;font-size: 18px;
    padding: 0px 0 22px;
}


.img_menu img { 
    align-content: center;
    user-drag: none;
    padding:0px;
    background-image: url('style/img/perfil.jpg');
  background-size: cover; /* Ajusta la imagen al tamaño del div */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen */
   zoom: 0.70;border-radius:5%;border:0px solid #CCC;
  -webkit-filter: saturate(0%);
   -moz-filter: saturate(0%);
   filter: saturate(0%);
   transition: all 0.3s ease;}
    
.img_menu img {
    -webkit-filter: saturate(90%);
   -moz-filter: saturate(90%);s
   filter: saturate(90%);
   transition: all 0.3s ease;  
    }   


.copy {
    font-weight: 600;
    color: #000;
    margin-top:2px;
     user-drag: none;
}

.copy img { 
    user-drag: none;
    padding:0px;    
  background-size: cover; /* Ajusta la imagen al tamaño del div */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen */
   zoom: 0.77;border-radius:5%;border:1px solid #CCC;
  -webkit-filter: saturate(0%);
   -moz-filter: saturate(0%);
   filter: saturate(0%);
   transition: all 0.3s ease;}
    
.copy img:hover {
    -webkit-filter: saturate(90%);
   -moz-filter: saturate(90%);s
   filter: saturate(90%);
   transition: all 0.3s ease;  
    }   


.copy_2 img {  
   zoom: 0.70;
    opacity:0.5;
       transition: all 0.2s ease;}

.copy_2 img:hover {
    opacity:0.70;
   transition: all 0.2s ease;
    color: #fff;
    }  


.perfil img { 
   position: relative;
    user-drag: none;
    margin-left:0px;
    margin-top:0px;    
  background-size: cover; /* Ajusta la imagen al tamaño del div */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  background-position: center; /* Centra la imagen */
   zoom: 0.85;
    border-radius:5%;
    border:0px solid #ddd;
  -webkit-filter: saturate(0%);
   -moz-filter: saturate(0%);
   filter: saturate(0%);
   transition: all 0.3s ease;}
    
.perfil img:hover {
    -webkit-filter: saturate(50%);
   -moz-filter: saturate(50%);s
   filter: saturate(50%);
   transition: all 0.3s ease;  
    }   

/* fixed */
.fixed-element {
  position: fixed;
  bottom: 0;
  left: 0;
  max-width: inherit; /* or a specific value */
  width: 50%;
  background-color: lightblue; /* for visibility */
  padding: 10px;
}

@media (max-width: 768px) {
  .fixed-element {
    bottom: auto;
    top: 0;
    left: auto;
    right: 0;
    width: 80px; /* Adjust for smaller screens */
  }
}

/* Contact */
.contact .form-control {fexampleInputEmail    
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: 1.875rem .85rem;
    color: #999;
    background-color: #fff;
    border: 1px solid #bbb;
    border-radius: 0;
}

.contact .form-control_2 {fexampleInputEmail
    z-index:4;
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: 0.2rem .55rem;
    color: #999;
    border: 0px solid red;
    border-radius: 0;
}

.form-control_2:active {fexampleInputEmail
    color: #000;   
}

ul.ox {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

ul.ex {list-style-type: disc;color:#444;
}


.x a {
    color: #fff;     
    text-decoration: none;
  }
.x a:hover {
    color: #222;
  }

 .y a {
    color: #fff;
     
    text-decoration: none;
  }

  .y a:hover {
    color: #ddd;
  }


 .img_invert {
  filter: invert(100%); 
}

 .img_normal {
  filter: invert(0%); 
}

 .img_black {
     opacity:1.0;
 filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url(desaturate.svg#greyscale);
    filter: gray;
    -webkit-filter: grayscale(1);
}
.img_home:hover { 
filter: invert(50%); /* Inverts the colors completely */
    transition: all 0.3s ease;
}

.tags2 {
	margin:0;
	padding:0;
	position:relaive;
	right:5px;
	bottom:-10px;
	list-style:none;    
}

.tags2 li{
	float: left;
        height: 20px;
        line-height: 19px;
        position: relative;
        font-size: 9px;
        margin-top:3px;
        margin-right:5px;
        margin-bottom:6px;
        margin-left:10px;
        padding-top:0px;
        padding-right:10px;
        padding-bottom:2px;
        padding-left:8px;
        background:  rgba(98, 98, 98, 0.5);
        color: #666;
        text-decoration: none;
        border-radius: 4px;
}
    
.tags2 li a {
 color:#fff;
}

.tags2 li a:hover {
 color:#fafafa;
}



.tags {
	margin:0;
	padding:0;
	position:relaive;
	right:5px;
	bottom:-10px;
	list-style:none;
    
}

.tags li{
	float: left;
        height: 20px;
        line-height: 19px;
        position: relative;
        font-size: 9px;
        margin-top:3px;
        margin-right:2px;
        margin-bottom:6px;
        margin-left:12px;
        padding-top:0px;
        padding-right:10px;
        padding-bottom:2px;
        padding-left:8px;
        background: #eee;
        color: #555;
        text-decoration: none;
        border-radius: 4px;
}
    
.tags li a {
 color:#555;
}

.tags li a:hover {
 color:#777;
}




.tooltip {    
    font-size: 0.70em;
    margin:4px;
  color: white;
    border-radius: 3px;
    
}

.tooltip-inner {
  background-color: #666 !important;
  color: #fff ;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
  border-top-color: #444 !important;
}

.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
  border-right-color: #444 !important;
}


.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
  border-bottom-color: #444 !important;
}


.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
  border-left-color: #444 !important;
}

.button:hover {background-color: none}


.button:active {
  background-color: none;
  box-shadow: 0 5px #666;
  transform: translateY(-10px);
}


.button_enviar {background-color: #222;
    border: 0px solid green;
    color:#fff;
}

.button_enviar:hover {background-color: #555;
    border: 0px solid green;
    color:#fff;

}



.my-element { 
   -webkit-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out
}



.container_menu { 
 display: flex;
  justify-content: center;
  align-items: center;
}

.selector {
     border-top: 0px solid #ccc;
     border-left: 0px solid rgb(0, 0, 0, 0.4);
     border-right: 0px solid rgb(0, 0, 0, 0.4);
     border-bottom: 0px solid #ccc;
     border-radius: 0px 0px 0 0 !important;
  background-color: none; 
  color: #fff;
  padding: 2px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  
}


/*******************************/
/* rk */
/*******************************/

.rk-item {
  display: block;
  background-color:#fff;
  width: 100%;
  border-radius:4px;
   -webkit-transition: opacity .5s;
        transition: opacity .5s;
     box-shadow: rgba(0, 0, 0, 0.60) 0px 7px 4px -4px;
}

.rk-item img{
  opacity:1;
  display: block;
  background-color:none;
  width: 100%;
  height: 100%;
  border-radius:4px;
      -webkit-transition: opacity .5s;
  transition: opacity .5s;
}

.rk-item img:hover {
  opacity: 0.8;
  visibility: visible;
  background-color:none;
  padding-left:0px;
  padding-right:0px;
  width:100%;
  height: 100%;
  border-radius: 4px;
   -webkit-transition: opacity .5s;
  transition: opacity .5s;
}
  
.item-meta:hover {
   opacity: 0.9;
  visibility: visible;
    background-color:none;
  padding-left:0px;
 
  border-radius: 4px;
  -webkit-transition: opacity .5s;
        transition: opacity .5s;
}

.item-meta{
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color:none;
    bottom: 0;
    color: #202020;
    display: -webkit-box;
      display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
      -ms-flex-pack: center;
        justify-content: center;
      left: 0;
      margin: auto;
      opacity: 0;
    padding: 0px;  
    position: absolute;
      right: 0;
     top: 0;
   -webkit-transition: opacity .5s;
        transition: opacity .5s;
}

/*******************************/
/* rk */
/*******************************/

.rk-item_02 {
  display: block;
  background-color:none;
  width: 100%;
  border-radius:4px;
 
     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 3px 5px 0 rgba(0, 0, 0, 0.19);
}

.rk-item_02 img{
  opacity:0.9;
  display: block;
  background-color:none;
  width: 100%;
  height: 100%;
  border-radius:4px;
}

.rk-item_02 img:hover {
  opacity: 0.9;
  visibility: visible;
  background-color:none;
  padding-left:0px;
  padding-right:0px;
  width:100%;
  height: 100%;
  border-radius: 4px;
}


  /*******************************/
/* rk */
/*******************************/

.rk-item_03    {
  display: block;
  background-color:none;
  width: 100%;
  border-radius:4px; 
    visibility: hidden;
}

.rk-item_03 img{
  opacity:0.9;
  display: block;
  background-color:none;
  width: 100%;
  height: 100%;
  border-radius:4px;
}

.rk-item_03 img:hover {
  opacity: 0.9;
  visibility: visible;
  background-color:none;
  padding-left:0px;
  padding-right:0px;
  width:100%;
  height: 100%;
  border-radius: 4px;
    }
  

/*/////////////////////
 Menu device
///////////////////////*/

/* === Menu menu_device === */

.menu_device {  
  --menu-bg: #fff;
  --menu-trsdu: .2s;
  --menu-trstf: cubic-bezier(.4, 0, .2, 1);
  --menu-pb: 0.40em;
  --menu-pi: 0.90em;

  align-items: center;
  background: var(--menu-bg);
  color: var(--menu--c, #222);
  display: flex;
  font-size: var(--menu-fz, .70rem);
  justify-content: space-between;
  margin-inline: auto;
  max-inline-size: var(--menu-desktop-w, 1200px);
  padding:
    var(--menu-pb)
    calc(env(safe-area-inset-right) + var(--menu-pi))
    var(--menu-pb)
    calc(env(safe-area-inset-left) + var(--menu-pi));
}
.menu_device:has(input:checked) .menu-flyout { translate: 0; }
.menu_device a {
  align-items: center;
  color: inherit;
  display: flex;
  gap: .5ch; /* gap between icon and text */
  line-height: var(--menu-a-lh, 2.5);
  transition: color var(--menu-trsdu) var(--menu-trstf);
  text-decoration: none;
}

.menu-toggle-label { z-index: 98; }
/*.menu-toggle-label:focus-within { outline: 2px solid; }*/

/* === Flyout === */
.menu-flyout {
  margin-top:0px; 
  height: 1000px;;
  background-color: #fff;
  color: var(--menu-flyout-c, inherit);
  display: flex;
  flex-direction: column;
  font-size: var(--menu-flyout-fz, 140%);
  inset: 0 var(--menu-flyout-offset, 0) 0 0;
  justify-content: space-between;
  padding: var(--menu-flyout-p, 5ch 2ch 2ch);
  position: fixed;
  transition: translate var(--menu-trsdu) var(--menu-trstf);
  translate: -200vw 0;
}

.menu-main { gap: clamp(0.5rem, -3.875rem + 14vw, 4rem);
  }

@media (min-width: 1150px) {
  .menu-cta, .menu-main { flex: unset; }
  .menu-flyout {
    --menu-flyout-dir: row;
    display: contents;
    color: inherit;
    font-size: revert;
  }
  .menu-toggle-label { display: none; }
  .menu_device { /* stretch background-color to edge-of-screen */
    border-image: conic-gradient(var(--menu-bg, hsl(240, 10%, 20%)) 0 0) fill 0//100vw;
    clip-path: polygon(-100vw 0, 100vw 0, 100vw 100%, -100vw 100%);
  }
}
/* === Prevent Scrolling, when flyout is visible === */
@media (max-width: 1000px) {
  body:has(.menu_device):has(input:checked) {
    overflow: hidden;
  }
}
@media(hover: hover) {
  .menu_device a:hover { color: var(--menu-a-h-c, #888); }
}

/* === Menu Toggle === */
.menu-toggle {
  --menu-toggle-bdrs: 3px;
  --menu-toggle-gap: 8px;
  --menu-toggle-h: 4px;
  --menu-toggle-w: 28px;

  appearance: none;
  color: inherit;
  display: grid;
  gap: var(--menu-toggle-gap);
  height: var(--menu-toggle-w);
  outline: none;
  place-content: center;
  width: var(--menu-toggle-w);
}
.menu-toggle::before{
  background-color: currentColor;
  border-radius: var(--menu-toggle-bdrs);
  content: "";
  height: var(--menu-toggle-h);
  transform-origin: center center;
  transition: rotate var(--menu-trsdu) var(--menu-trstf);
  width: var(--menu-toggle-w);
}

.menu-toggle::after {
  background-color:currentColor;
  border-radius: var(--menu-toggle-bdrs);
  content: "";
  height: var(--menu-toggle-h);
  transform-origin: center center;
  transition: rotate var(--menu-trsdu) var(--menu-trstf);
  width: var(--menu-toggle-w);
}
.menu-toggle:checked { gap: 0; }
.menu-toggle:checked::after {
  rotate: 45deg;background-color: #444;
  translate: var(--menu-toggle-h) calc(var(--menu-toggle-h) / -2);
}
.menu-toggle:checked::before {
  rotate: -45deg;background-color: #444;
  translate: var(--menu-toggle-h) calc(var(--menu-toggle-h) / 2);
}

main {  
  margin-inline: auto;
  max-inline-size: 1000px;
  padding-inline: calc(env(safe-area-inset-right) + 0.65rem) calc(env(safe-area-inset-left) + 0.65rem);
}

/* === Icons === */
.icon, .icon-stroke {
  height: var(--icon-sz, 2.0em);
  width: var(--icon-sz, 2.0em);
}
.icon-stroke {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width:1;
  stroke: currentColor;
}

.imageBG img{
 width: 100%;
  height: 100%;
  object-fit: cover;
}