@font-face {
    font-family:"bold";
    src:url("../type/bold.woff2") format("woff2"),url("..type/bold.woff") format("woff");
    font-style:normal;
    font-weight:400;
}

@font-face {
    font-family:"medium";
    src:url("../type/medium.woff2") format("woff2"),url("..type/medium.woff") format("woff");
    font-style:normal;
    font-weight:400;
}

:root{--navbar-height:60px}

*,html  { box-sizing: border-box; }
*,*:before,*:after { box-sizing: inherit; }
html { margin: 0; padding: 0; overflow-y: scroll; }

a { color: #000; text-decoration: none; }
a:hover { color: #b9b9b9 }

body {
  background:#fff;
  color:#000;
  font-family: "medium", Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

h1, h2, h3, p {
  padding: 0;
  margin: 0;
}

p {
  font-size: 16.8px;
  line-height: 24px;
}

 ul li {
  font-size: 12px;
  line-height: 15px;
  font-family: "medium", Arial, Helvetica, sans-serif;
  letter-spacing: 0.15px;
  
}

ul {
  margin: 0;
}

ul.contactos {
  padding: 20px 0 40px;
  list-style: none;
}


ul.cv .titulo {
  font-family: "medium", Arial, Helvetica, sans-serif;
}

ul.cv {
  list-style-type: disc; 
  list-style-position: inside; 
  padding: 20px 0 0 0;
}

ul.cv li::marker {
  font-size: 0.6em; 
  padding-left: 10px;
  color: #b9b9b9;
}

ul.cv li.titulo {
  padding-left: 0;
  padding-bottom: 4px;
  font-family: "bold", Arial, Helvetica, sans-serif;
  list-style-type: none !important; 
}

ul.cv li {
  padding-bottom: 2px;
} 

.navbar{
  position:absolute;
  top:0;
  width: 100%;
  padding: 15px 20px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  z-index:60;
}

.plus-btn{
  position:relative;
  width:18px;
  height:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.plus-bar{
  position:absolute;
  width:18px;
  height:2px;
  background:#000;
  left:0;
  transition:opacity .25s ease;
}
.plus-bar.vert{ transform: rotate(90deg); }
.plus-btn.active .plus-bar.vert{ opacity:0; }

.page{
  position:relative;
/*   height: calc(100vh - (20px*2));
  margin-top: calc(var(--navbar-height) + 10px); */
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:20px;
  align-items:center;
  z-index:10;
}

.signature{
  position:fixed;
  left:20px;
  top:50%;
/*   transform:translateY(-50%); */
  z-index:70;
  font-size:16.8px;
  font-family: "bold", Arial, Helvetica, sans-serif;
  pointer-events:none;
  white-space:nowrap;
  letter-spacing: 0.3px;
}

.hero{
  grid-column: span 8 / auto;
/*   margin-top:58px;
  margin-bottom:58px; */
 
/*   height: calc(100% - 116px); */
  
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  position:relative;
}

.mySwiper:hover {
  cursor: pointer;
}

.swiper-container {
  width: 100vw;
  height: calc(100vh - 45px);
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center; 
  justify-content: center; 
  box-sizing: border-box; 
/*   background: pink; */
}

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

.swiper-slide img {
/*   max-width: 100vh; */
  max-height: calc(100vh - 93px);
  
  object-fit: contain; 
  position: absolute;
  right: 20px;
  bottom: 0;
}

.slide-desc {
  padding: 15px 20px;
  text-align: right;
  width: 100%;
  font-size: 11.5px;
  letter-spacing: 0.15px;
}

.img-responsive {display:block;max-width:100%;height:auto }


.overlay {
  position: fixed;
  inset: 0;
  padding: 20px; /* instead of margin */
  background: #fff;
  z-index: 50;
  display: none;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: start;
  padding-top: 38px; /* this will add on top of the 20px padding */
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.overlay p {
  padding-top: 8px;
}

.overlay::-webkit-scrollbar {
  display: none;
}

.overlay.active{ display:grid; }

.about-left{ grid-column: span 4; }

.about-image-wrap{ grid-column: span 4; }

/* .about-image{ width:100%; height:auto; display:block; } */

.about-image {
  width: auto;
  height: auto;
  display: block;
  padding-top: 10px;
}

.about-text-wrap{
  grid-column: span 4;
}

.about-text-wrap:focus { outline:none; }

@media (max-width:900px){
  
  body {
    height: 100dvh;
  }
  
  .page{ grid-template-columns: repeat(6, 1fr); }
  .signature{ left:20px; top: 14px; position: absolute; }
  .hero{ grid-column: span 6; }
  .overlay{ grid-template-columns: repeat(6,1fr); padding-top: 8px; }
  .about-left, .about-image-wrap, .about-text-wrap{ grid-column: span 6; }
  
  
  .about-image {
      padding-top: 0;
      margin: 0 auto;
  }
  
  .swiper-slide { display: flex !important; }
  
  
  .overlay p { padding-top: 0; }
  ul.contactos { padding: 20px 0 40px; } 
  .slide-desc { text-align: center; }
  
  .swiper-container {  
    height: calc(100dvh - 85px);
    display: flex;
    align-items: center;
    justify-content: center;
   }
  
  .swiper-slide img { right: 0; left: 0; margin: 0 auto; position: static; }
  
  .navbar { background: #fff;  }
  
}