0:root {
   --blue: rgb(20, 117, 186);
   --lightblue: rgb(12, 153, 220);
   --green: rgb(3, 216, 138);/* rgb(129, 231, 163);*/
   --highlights: rgb(217, 233, 242); /*rgb(251, 235, 227);*/
   --shadows: rgb(54, 67, 60);
}
.item.resource.show #search-container {
display:none;
}
/*.item.resource.show #top-nav{
display:none;
}*/
body.item.resource.browse footer {
   display:none;
}
.show #content h2:first-child+h3 {
display:none;
}
 /* CARRUSEL DE IMAGNES*/
.carousel {
            display: flex;
            overflow: hidden;
            width: 100%;
            max-width: 600px; /* Adjust the maximum width as needed */
            margin: auto;
        }

        .carousel-inner {
            display: flex;
            transition: transform 0.5s ease-in-out;
animation: slide 10.5s infinite;

        }
        .carousel-item {
            min-width: 100%;
            box-sizing: border-box;       
            width: 100%;
            height: auto;
            display: block;
        }
@keyframes slide{
0%{transform: translateX(0);}
16.66%{transform: translateX(0);}
33.33%{transform: translateX(-100%);}
50%{transform: translateX(-100%);}
66.66%{transform: translateX(-200%);}
83.33%{transform: translateX(-200%);}
100%{transform: translateX(-300%);}
}

@media screen and (max-width:600px) {
/* .flex-container {
   flex-wrap:wrap;
  visibility:hidden;
  display:none;
 
 }*/
  #big-welcome-box { flex-wrap: wrap;  }
  .text {   width:100%;   }
  .subtext {  width:100%;  }

}

/*@media screen and (max-width:600px) {
   .flex-container {
display:none;
  visibility:hidden;
 flex-wrap:wrap;

 
}

  #big-welcome-box {
   flex-wrap:wrap;
}
}*/
#top-nav>ul>li{
   width: 100%;
   font-size:50px;
background-color: transparent; 
}

/* DROPDOWN MENU */
#top-nav>ul {
font-size: clamp(5rem, 10vw, 6rem); 
display:flex;
flex-direction:row;
text-align: center;
}
footer{
color: rgb(255,255,255);
font-size:clamp(.7rem, 1.5vw, 1rem);
font-weight: 800;
text-align: center;
padding: 10px;
background-color: rgb(12, 153, 220);
/* background-image: linear-gradient(to top, black, transparent), url(http://scholar-omeka.uprm.edu/files/original/50130d536479a3d7e0fa8a2aabb5a1c726c23288.png);*/
}
.resource-list ~ .pagination {
   display:none;
}

.item-resource 
p a, span a, .button, button, input[type="submit"], .secondary-nav li a, .pagination a.button, .item-pagination a, #featured .featured-meta h3, .advanced-search, .value a span, .sub-menu, .results li a, .results > ul + a{
background-color: var(--green);
    display: block;
    margin-left: auto;
    margin-right: auto;
    color: white;
    font-family: 'Karla';
    border-width: 1px;
animation-duration:1.5s;
animation-timing-function: ease-in-out;
}
#page-actions input[type="submit"]:hover{
   transform: scale(1.6);
}
option[value="resource_class_label"] {
   display:none;
}
option[value="numeric:timestamp:7"] {
   display:none;
}
option[value="dcterms:identifier"] {
   display:none;
}
.resource-list h4 {
   margin:1rem;
width:auto;
}
.property h4{
font-family: 'Anton';
color: var(--blue);
}
.results>ul+a {
border-radius:20px;
   background-color: var(--lightblue);
color: white;
border-width: 1px;
border-color: var(--blue);
font-family:'Karla';

font-size:1.25rem;
}
.results li a {
  font-family:'Karla';
}
.results{
  margin: 24px;
  text-align:center;
}
h1 {
margin-top: 25vh;
font-family: 'Karla';
text-align:center;
color: var(--blue);
}
select {
border-radius:10px;
font-family:'Karla';
color:var(--shadows);
}
#advanced-search .value select, #advanced-search .value input{
border-radius:10px;
}

input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], textarea{
border-radius:15px;
}
.advanced-search-content {
width:60vw;
display:block;
margin-left:auto;
margin-right:auto;
padding-top: 50px;
}

#advanced-search .add-value {
background-color:var(--green);
color: white;
border-radius: 5px;
border-width:1px;
}
form .field .field-meta, form .field label, form .field .label {
  color: var(--blue);
font-family: 'Karla';
font-size: 1.25rem;
}
#content h2 {
display:none;
}
#advanced-search {
padding:1rem;
margin:1rem;
margin-top:2rem;
}
.resource-list .resource img {

border-top-radius: 10px;
       animation-duration:1.5s;
    animation-timing-function: ease-in-out;
 width:100%;
  filter: grayscale(100%);

/*
position:relative;
display: block; 
*/
}
.resource-list .resource img:hover {
   filter: grayscale(0%);
}

.resource-list .resource a {
position: relative;

margin:auto;

width:50%;
color:white;
text-align: center;
font-family: 'Karla';
font-size: 1rem;

}
.resource-list .resource{
margin:-10px;

  width:100%;
   text-align:center;
background-color: black;
       animation-duration:2s;

border-radius:10px;
border-width:1px;
border-color: black;
}
.resource-list .resource:hover{
  transform:scale(1.1);
z-index: 1;
}

/*
display: inline-block;
position:relative;
}
.resource-list .resource:after {
position: absolute;
    content:"";
height:100%;
    width:100%;
    top:0;
    left:0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
}*/



.resource-list {
   display:grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
height: calc(100vh - 10px);
 grid-gap: 1rem;
justify-content: center;
align-items: center;
   margin:1rem;
}

.sorting select {
  font-family: 'Karla';
   border-radius: 15px;
   color: var(--lightblue);
   border-color: var(--lightblue);
   background-color: white;
   border-width:1.5px;
   
}
.sorting button[type="submit"] {
  font-family: 'Karla';
   border-radius: 25px;
  background-color: var(--blue);
   color: white;
   border-color: white;
   border-width:1.5px;

}
.search-filters {
   display: none;
}
.advanced-search {
  font-family: 'Karla';
   border-radius: 15px;
  background-color: var(--green);
   color: white;
   border-color: var(--lightblue);
   border-width:1.5px;
}
.pagination {
   font-family: 'Anton';
   color: var(--shadows);
}
.pagination input {
   font-family: 'Anton';
   color: black;
   border-radius:5px;
  background-color: transparent;
}
.browse-controls {
   margin-top:15vh;
   padding:1vw;
}


h2 .title {
  display:none;
   color:var(--blue);
   font-family: 'Anton';
   font-size: 2rem;
    visibility: hidden;
    position: relative;
}
h2 .title:after{
    visibility: visible;
    top: 0;
    left: 0;
    content: "Collection of Interviews";

}
h2{
  left: -5px;
   text-align:center;
}
header nav>ul {
    top:auto;
    margin: auto;

   padding: 24px;
}

/* TEXTO DROPDOWN MENU*/
.navigation a {
z-index: 2;
font-family: 'Anton';
/* font-size: 1rem; */
text-align: center;
color: rgb(3, 216, 138);
/*margin-left: 1vw;*/
}
#search-form input[type="text"] {
border: 0px;
color: var(--highlights);
background-color: black;
width:100%;
font-size: 1rem;
font-family: 'Karla';
text-align: start;
}
#search-form button[type="submit"] {
   display: none;
}
#search-form{
text-align: start;
padding-top:0px;
background-color: transparent;
border-radius: 5px;
display: block;
margin-left: auto;
margin-right: auto;
width:100%;
line-height:100%;

}
/*DROPDOWN MENU (NAV MENU)*/
.navigation {
z-index: 2;
display: flex;
color: rgb(3, 216, 138);
/* background-color:  rgb(54, 67, 60, .75);*/
  background-size: auto;
  border-radius: 10px; 
   /*height: 35vh;*/
    height: 35vh;
    width: 20vw;
    animation-duration:4s;
    animation-timing-function: ease-in-out;
  font-family: 'Karla';
margin-right: 15px;

} 

/*ASIDE TRY (for the translation button*/
aside{
padding-right: 106px;
margin-right:106px;
float: right;
}

#search-container button{
   background-color: transparent;
/*opacity: 0.6;*/
color: rgb(0, 190, 0);/*rgb(159, 197, 165);*/
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
text-align: center;
    animation-timing-function: ease-in-out;
    animation-duration: 0.3s;
}
#search-container button:hover{
-webkit-text-stroke-width: 0.25px;
-webkit-text-stroke-color: var(--shadows);
opacity: 1;
color: black;
}

/*COLOR DEL HEADER (background color)*/
#top-nav button {
/*opacity: 0.6;*/
background-color:transparent;
    animation-timing-function: ease-in-out;
    animation-duration: 0.3s;
color: rgb(0, 190, 0);/* rgb(159, 197, 165);*/
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;


}

#top-nav button:hover {
-webkit-text-stroke-width: 0.25px;
-webkit-text-stroke-color: var(--shadows);
opacity: 1;
color: black;
} 

.space{
display: flex;
background-color:transparent;

}
.site-title {
    font-size:clamp(1rem,3vw,2rem);
   font-family: 'Anton';
}
input {
     border-radius:20px;
     border-style:none;
}
nav ul {
list-style: none;
font-family:'Anton';
/*text-align: right;*/
/*display: inline-block;*/
/*margin-left: 10px;*/
color: rgb(0,190,0);
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
 /* padding-left:7.7% */
word-spacing: normal;
font-size: 26px;
}

#translate{
background-color: transparent;
text-align:right;
border:0;
}

/* PARA EDITAR EL ICON DE TRANSLATE*/
.dropdown {
display: inline-block;
 margin-right: 100px;
padding-right:100px; 
float: right;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}

.checkbox-container {
    display: block;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.checkbox-container input {
    margin-right: 8px;
}

.checkmark {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #eee;
    border-radius: 50%;
}

.checkbox-container input:checked + .checkmark {
    background-color: #2196F3;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.nav-menu{
/*list-style: none;*/
font-family:'Anton';
/*text-align: right;*/
/*display: inline-block;*/
/*margin-left: 10px;*/
color: rgb(0,190,0);
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
padding-left:8%;
padding-top: none;
}
.nav-menu: hover{
-webkit-text-stroke-width: 0.25px;
-webkit-text-stroke-color: rgb(255,255,255);
opacity: 1;
color: white;
}
 
/*HEADER (THEOHL@UPRM + LUPA )*/
header {
display: flex;
background-color:transparent;
flex-wrap: no-wrap;
/* justify-content: space-between; */
/*  background-image: linear-gradient(var(--blue), transparent);*/
 /* background-color: var(--shadows); */
box-sizing: border-box;
padding-left: 8%;
padding-right: 8%;
  font-size: 1.3rem;
 /* position: fixed;*/
z-index: 1;
  margin:0;
  /*width: 97.5%*/;
width:100%;
  /* text-align: center;  Center the content horizontally */
}

header a {
  font-family:'Anton';
  color: rgb(0, 190, 0); /*rgb(3, 216, 138);*//*rgb(159, 197, 165);*/
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
  transition: 0.3s;
  /*opacity: 0.6; */
background-color: transparent;
}
header a:hover {
/*
     background: -webkit-linear-gradient(var(--blue), var(--lightblue));*/
color: black;
-webkit-text-stroke-width: 0.25px;
-webkit-text-stroke-color: var(--shadows);
   opacity:1;
   transition: 0.3s;
}

/*SECCION DE LOGO DE OHL Y WE-PRESERVE-PUERTORICAN-STORIES*/
.image-divider {
   display: flex;
   justify-content: space-evenly;
   align-items:center;
/*align-items: flex-start;*/
   align-content: space-between;
   transition: 0.1s;
   transition-timing-function: ease-in-out;
   width:100%;

   
}
#img-block {
   /* margin: 0; */
   display: flex;
max-width:40%;
/*top: 40vw;*/
width:25vw;
height:auto;
   object-fit: contain;
   /* align-self: center; */
   flex: 0 0 auto;
   transition:0.2s;
   transition-timing-function: ease-in-out;
  /* animation-name: logo;*/
  /* animation-duration: 0.3s;*/
}

@keyframes logo {
   0% { transform: rotate(2deg);}
   50% { transform: rotate(-2deg);}
   100% { transform: rotate(2deg);}
   
}
/* PARA EDITAR TAMAñO DE SEC WE-PRESERVE-PR-STORIES*/
.flex-container {
  margin: 0;
line-height:clamp(1px, 18vh, 7rem);
height: calc(100vh - 155px); 
   display:flex;
    /* justify-content: center; */
   /* align-items: center; */
   /* background:transparent; */
   /* background-image: url(http://scholar-omeka.uprm.edu/files/original/3b760eb331d0d78fe436d72795e897a795e0490a.png); */
   /* background-size: clamp(150px, 100%, 400px); */
   /* background-repeat: no-repeat; */
   /* background-position: center; */

   font-family: 'Anton';
   font-size: clamp(3rem, 15vh, 8rem);
   /* width:100%; */
   /* height:100%; */
   transition: 0.3s;
   
   transition-timing-function: ease-in-out;
   /* margin: 0; */
   /* background-color: black; */
/*   background-size: 200%;*/
width:clamp(7rem, 45vw, 100%);
flex-direction:column;
}

@keyframes theme {
   0% {margin-top:100px;   }
   100% { margin-top:0px;}
}

.flex-item {
font-size: clamp(2rem, 12vw, 7rem);

   transition: 0.2s;
   transition-timing-function: ease-in-out;
   animation-duration: 1s;
   animation-name: theme;
   background-color: var(--shadows);
   margin-right: 0;
   color: var(--highlights);
height: clamp(35%, 30vh, 100%);
   text-decoration: none;
}

#we{
padding-top: 30px;
}

.flex-item:nth-last-child(4):hover {
   text-decoration: none;

   -webkit-transform: scale(1.1);
   color:transparent;
   /* color: var(--lightblue); */
   /* background-image: url(http://scholar-omeka.uprm.edu/files/original/3b760eb331d0d78fe436d72795e897a795e0490a.png); */
   background-image: cover;
   background-image: url(http://scholar-omeka.uprm.edu/files/original/f17256f23678c85c7500a7ac777c3395e59db938.jpg);
   background-position: center;
   background-size: cover;
   background-position-y: 15%;

   
}
.flex-item:nth-last-child(3):hover {
   -webkit-transform: scale(1.1);
   color:transparent;
  background-size: contain;
   background-image: url(http://scholar-omeka.uprm.edu/files/original/ce99c6f8d9ae867b71a679df4b9c4b13acea323f.jpg);
   /* background-color: var(--highlights); */
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;


}
.flex-item:nth-last-child(2):hover {
   -webkit-transform: scale(1.1);
   /* -webkit-text-fill-color: transparent; */
   /* -webkit-background-clip: text; */
   background-size: contain;
   /* background-color: var(--blue); */
   background-image: url(http://scholar-omeka.uprm.edu/files/original/80af79f21ed72f4556db23ff335b7a128c211ede.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   color:transparent;
background-position-y:35%;
}

.flex-item:nth-last-child(1):hover {
   -webkit-transform: scale(1.1);
   background-size: contain;
   color:transparent;
   background-image: url(http://scholar-omeka.uprm.edu/files/original/eebea4b2ce5088652bb5f745b47610ac22674ac0.jpg);
   background-color: var(--highlights);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
background-position-y: 45%;

}
.image-divider:has(.flex-item:nth-last-child(1):hover) {
   background-size: cover;
   background-position: center;
   -webkit-transform: scale(1.0);

   -webkit-clip-path: polygon(0 0, 100% 0, 100% 56%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);

}
/* .image-divider:has(.flex-item:nth-last-child(2):hover) {
   background-image: url(http://scholar-omeka.uprm.edu/files/original/80af79f21ed72f4556db23ff335b7a128c211ede.jpg);
   background-size: contain;
   background-position: center;

   -webkit-transform: scale(1.05);

   -webkit-clip-path: polygon(0 0, 100% 0, 100% 56%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);

} */
/* .image-divider:has(.flex-item:nth-last-child(3):hover) {
   background-image: url(http://scholar-omeka.uprm.edu/files/original/ce99c6f8d9ae867b71a679df4b9c4b13acea323f.jpg);
   background-size: cover;
   background-position: center;
   -webkit-transform: scale(1.05);

   -webkit-clip-path: polygon(0 0, 100% 0, 100% 56%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);

} */
.flex-container:has(.flex-item:hover) .flex-item:not(.flex-item:hover){
   opacity: 0.07;
   
   -webkit-text-stroke-width: 3px;
   -webkit-text-stroke-color: black;
   background-image: none;
}
.flex-container:not(:has(.flex-item:hover)) {  
   opacity:1;
   /* background-image: url(http://scholar-omeka.uprm.edu/files/original/3b760eb331d0d78fe436d72795e897a795e0490a.png); */
   background-image: cover;
   -webkit-text-stroke-width: 0px;
}

.boxes {
line-height:100%;
   display: flex;
   flex-flow: column wrap;
   justify-content: flex-end;
   align-items: center;
   color: var(--green);
   /* background-color: var(--shadows); */
   font-family: 'Anton';
   font-size: clamp(2rem, 10vh, 6rem);

   margin: 0;

   background-size: contain;
   background-repeat: no-repeat;
}
#big-welcome-box {
top:50px;
padding:5px;
   display: flex;
   flex-direction: row-reverse;
   align-items: flex-end;
   flex-wrap: nowrap;
   gap: clamp(5px, 2%, 30px);
align-items: center;
   /* background-image: url(http://scholar-omeka.uprm.edu/files/original/50130d536479a3d7e0fa8a2aabb5a1c726c23288.png); */
   /* align-items: space-around; */
   /* background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   background-position-y: bottom; */
   
}
.welcome-box {
   /* border: 10px white; */
   /* border-radius: 100px; */
   z-index: -1;
   margin:0;
margin-left: 30px;
   transition:0.5s;
width:90vh;
height:auto;

}
.welcome-box #group {

   width: 110%;
   opacity:0.9;
   border-radius: 5px;
   transform: rotate(0deg);
   animation-duration: 0.3ss;
   animation-timing-function: ease-in-out;
}
.welcome-box #group:hover {
  opacity:1;
  transform: scale(1.5);
display:none;
}

.welcome-box #welcome {
   background-color: transparent;
   font-family: 'Anton';
   font-size: clamp(2rem, 40vh, 6rem);
   display: flex;
   flex-flow: column wrap;
   opacity: 0.2;
   /* justify-content: flex-end; */
   /* background-color: var(--green); */
   /* color: var(--blue); */
   color:transparent;
  /* height: clamp(10vh, 30%, 60vh); */
  transition:0.3s;
  -webkit-transform: scale(0.7);

   /* justify-content: justify; */
   /* align-items: flex-start; */

}
.welcome-box #welcome:hover {
   -webkit-transform: scale(1.);
   opacity: 1;
}

#collection {
line-height:100%;
   background-color: transparent;
   text-align: center;
   font-family: 'Anton';
   font-size: clamp(2rem, 11vw, 7rem);
   display: flex;
   flex-flow: row nowrap;
   border-radius: 20px;
   opacity: 0.8;
   text-decoration: none;
   /* justify-content: flex-end; */
   background-color: var(--blue);
    height: 100%; 
   width: 100%;
   color: var(--green);
  /* height: clamp(10vh, 30%, 60vh); */
  transition:0.3s;
  /* -webkit-transform: scale(0.7); */
  /* border-width: 2px; */
  /* border-color: white; */
top: 70px;
left: 50px;

}
#collection:hover{
   /* background-image: url(http://scholar-omeka.uprm.edu/files/original/50130d536479a3d7e0fa8a2aabb5a1c726c23288.png); */
   /* transform: scale(1.02); */
   opacity: 1;
   background-size: ;
   cursor:pointer;
   
}

.footerLogo{
width:90%;
margin-left: 30px;
position:left-center;
height:auto;
background-color: transparent; 
justify-content: center;
} 
#footerText{
color:black;
text-align:center;
margin-top:50vh;
transform:translateY(-50%);

}

 
.text {
   /* opacity: 0; */
line-height:100%;
   font-family: 'Karla';
   background-color: transparent;
   color: var(--lightblue);
   font-size: clamp(1rem, 3vw, 3rem);
   /* width: 100vh; */
   margin: 10px;
   padding: 40px;
   width: 80%;
}

/* SECOND BODY IMAGE*/
#comp-img {
width: 90vh;
height: 90vh;
float: right;
margin-right: 20px;
right:0;

}
 #comp-img:hover {
   transform: scale(1.1);
} 
.new-box {
   background-size: contain;
   background-repeat: no-repeat;
   border-radius: 10px;


}
.subtext{
   font-family: 'Karla';
   opacity: 1;
   background-color: transparent;
line-height:100%;
   color: var(--shadows);
font-size: clamp(.9rem, 2.5vw, 3rem);
   width: 60%;
float:right;
}
.box {
   width: clamp(100px, 40%, 34%);
   max-width: 33%;
   background-size: cover;
}

body {
margin: auto;
  background-color: var(--highlights);
}
body h2 {
    font-family: helvetica;
   color: #4db8ff;
   margin: auto;
   padding: 20px;
   width: 100%;
background-color: transparent;

}
p {
 font-family: helvetica;
 font-size: 20px;
  margin:auto;
 padding: 20px;
 text-align: justify;
 width: 100%;
  background-color: white;
color: #004d80;
display:inline-block;

}


img {
 /* display: block; */

  max-width:100%;
  /*float: right;*/
}



body .link {
 background-color: transparent;
 border-color: #4db8ff;
 color: #4db8ff;
 text-decoration: none;

 font-size: 16px;
 margin: 4px 2px;
 cursor: pointer;
 border-radius: 8px;
 width: 25%;

 transition-duration: 0.4s;
 font-size: 18px;
 font-family: helvetica;
}

body .link:hover {
  background-color: #4db8ff;
  color: white;
}

#foundation {
 width: 65%;
  text-align: justify;
display: block;
margin-left: auto;
 margin-right: auto;
}

.item.resource.show {
padding:5vw;
}


/*ABOUT PAGE*/

#content {
   padding:0;
}
.header-about {
width:100%;
line-height:100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: transparent;
/* FOTO MAPA PR*/
   background-image: linear-gradient(to top, black, transparent), url(http://scholar-omeka.uprm.edu/files/original/50792f9bf1f927f44e28129b60f0b177ebf93da2.png);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: center;
   background-size: cover;
   position: relative;
   margin: 0;
   padding:0;
}
#body-about {
line-height:100%;
margin:0;
padding:0;
}
.header-about #title-about {
line-height:150%;
background-position-y: top;
   display: flex;
   margin:0;
padding:0;
   font-family: 'Anton';
   color: var(--green);
   font-size: clamp(1rem, 5vh, 4rem);
   justify-content: center;
   background-color: transparent;
}

.header-about #about-title-ohl{
width:100%;
line-height:100%;
   opacity: 1;
   margin:0;
padding-top: 50px;
   display: flex;
   font-family: 'Anton';
   color: transparent;
   font-size: clamp(3rem, 30vw, 10rem);
   justify-content: center;
   background-color: transparent;
   height: 85%;
   animation-duration: 0.3s;
   animation-name: ohl;
   -webkit-text-stroke-width: 8px;
   -webkit-text-stroke-color: var(--highlights);
   transition: 0.3s;
}

.header-about #title-ohl {
width:100%;
line-height:100%;
   opacity: 1;
   margin:0;
padding:0;
   display: flex;
   font-family: 'Anton';
   color: transparent;
   font-size: clamp(7rem, 50vw, 20rem);
   justify-content: center;
   background-color: transparent;
   height: 100%;
   animation-duration: 0.3s;
   animation-name: ohl;
   -webkit-text-stroke-width: 8px;
   -webkit-text-stroke-color: var(--highlights);
   transition: 0.3s;
}
.header-about #title-ohl:hover {
   color:var(--highlights);
   opacity: 1;
   -webkit-text-stroke-width: 0px;
}
@keyframes ohl {
   0% {opacity: 0;   }
   25% {opacity: .2;   }
   50% {opacity: .4;   }
   75% {opacity: .7;   }
   /* 85% {opacity: .1;} */
   100% {opacity: 1;}
}

#map {
   width: 100%;
  height: 100px;
  border-radius: 50px;
  background-color: transparent;
  position: relative;
  animation-name: map;
  color: white;
  animation-duration: 0s;
  /* animation-delay: 2s; */
margin:0;
padding:0;
  background-position: center; 
}
@keyframes map {
   0%   {background-color:var(--blue); left:-500px; top:-300px; width:100px;height: 100px;}
   /* 25%  {background-color:yellow; left:200px; top:-400px; width: 100px;height: 100px;}
   50%  {background-color:var(--lightblue); left:100px; top:-300px; width:100px;height: 100px;}
   75%  {background-color:var(--green); left:-100px; top:-200px; width: 100px;height: 100px;} */
   100% {background-color:var(--blue); left:-95px; top:-290px; width:20px; height: 150px;}
 }
.text-about {
line-height:100%;
   display: flex;
   justify-content: center;

}
 #text-descripton {
/*text-wrap:wrap;*/
text-wrap:balance;
word-spacing: -2px;
   line-height:200%;
   font-family: 'Karla';
   color: var(--lightblue);
   font-size: clamp(1rem, 2vw, 2rem);
   margin: 2px;
  padding:1px;
   width:70vw;
   background-color: transparent;

}

#learnMore {
text-align: center;
display:block;
width: 50%;
margin-right: auto;
margin-left: auto;
border-radius: 15px; 
line-height:100%;
 /*outline: 3px solid var(--shadows);*/
background-color: rgb(3, 216, 138);
   color:var(--shadows);
   font-family: 'Karla';
   font-size: clamp(1.5rem, 3vw, 2rem);
   opacity: 0.9;
   cursor: pointer;
padding: 10px 20px; 
   transition:0.7s;
   transition-timing-function: ease-out;
}
 #learnMore:hover {
   /*background-image: linear-gradient(-45deg, transparent, var(--shadows));*/
  transform: scale(1.02);
background-color: rgb(12, 153, 220);
} 

.learn-more-button{
text-align: center;
display:block;
width: 50%;
margin-right: auto;
margin-left: auto;
border-radius: 15px; 
line-height:100%;
 /*outline: 3px solid var(--shadows);*/
background-color: rgb(3, 216, 138);
   color:var(--shadows);
   font-family: 'Karla';
   font-size: clamp(1.5rem, 3vw, 2rem);
   opacity: 0.9;
   cursor: pointer;
padding: 10px 20px; 
   transition:0.7s;
   transition-timing-function: ease-out;
}

.learn-more-button:hover{
  transform: scale(1.02);
background-color: rgb(12, 153, 220);
color: rgb(255,255,255);
}





/*
THANK YOU TO:

Photo by <a href="https://unsplash.com/ko/@insungyoon?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">insung yoon</a> on <a href="https://unsplash.com/s/photos/headphones?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

Photo by <a href="https://unsplash.com/@jontyson?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jon Tyson</a> on <a href="https://unsplash.com/s/photos/microphone?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  
Photo by <a href="https://unsplash.com/@brunocervera?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">BRUNO CERVERA</a> on <a href="https://unsplash.com/s/photos/microphone?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  
Photo by <a href="https://unsplash.com/@lgeorge210?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Alex George</a> on <a href="https://unsplash.com/s/photos/puerto-rico?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  
Photo by <a href="https://unsplash.com/@thetaikun?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">J. Amill Santiago</a> on <a href="https://unsplash.com/s/photos/puerto-rico?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

Photo by <a href="https://unsplash.com/@gatolulu?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ricardo Dominguez</a> on <a href="https://unsplash.com/photos/b0n-Qg2oF0w?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

Google Earth.

*/