body::-webkit-scrollbar {
  display: none;
}
bodi *::-webkit-scrollbar {
  display: none;
}

@font-face {
    font-family: 'Poppins';
    src: local('Colaborate'); /* Forza l'uso di Arial localmente */
    font-weight: normal;
    font-style: normal;
}



   @import url('https://fonts.googleapis.com');


@import url('https://fonts.googleapis.com/css2?family=Expletus+Sans:wght@400;500;600;700&family=Colaborate:wght@100;300;400;500;700&family=Exo:wght@400&display=swap');

@import url('https://cdn.jsdelivr.net/fontsource/fonts/expletus-sans@latest/latin-wght-normal.css');

body {
  font-family: 'Expletus Sans Variable', sans-serif;
}


html, body{
  width: 100%;
  /* background: #fffef5; */
}
.megaBox{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;

  background:#5d89a2 ;

  /* border: 10px solid red; */

  /* border: 10px solid red; */

  /* border: 10px solid red; */
  /* background: #0575e6; */
  animation-name: myAnimation;
  animation-duration: 4s;
  
}
@keyframes myAnimation{
  from{opacity: 0;}
  to{opacity: 1;}
}

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

.wrapper *{
 /* visibility: collapse; */
}

.wrapper{
  position: absolute;
  top: 30vw;
  opacity: 0;
  visibility: collapse;
}
.nextprevback{
position: fixed;
  top: 52vh;
  left:0;
transform: translate(0, -5vh);
  width: 4vw;
  height: 12vw;
  /* border: 10px solid red; */
  /* background: #fffef54e !important; */
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  /* grid-template-columns: 1fr;
  grid-template-rows: 200px, 200px, 200px; */
  /* padding-bottom: 5px; */
  /* padding-bottom: 15px; */
  border-radius: 0 10px 10px 0;
background: #fffef5;
backdrop-filter: blur(20px);

  border: none;
  z-index: 99;
}

@media (min-width: 2000px) {
  .nextprevback{
    top: 27vw;
    height: 10vw;
    /* border: 1px solid red; */
  }
}



@media (max-width: 1000px) {
.nextprevback{
  top: 40vw;
  width: 7vw;
  height:25vw;
}

}

@media (max-width: 768px) {
  .nextprevback{
  top: 55vw;
  width: 7vw;
  height:25vw;
}
}

.megabox{
  top: 0;
}
  

/* .changeDoc{
  position: absolute;
  width: 100%;
  height: 33.33%;
  /* border: 1px solid red; 
} */

#btnBack{
  position: absolute;
  top: 0;
  width: 100%;
  height: 33%;
  border-radius: 0 10px 0 0;

  /* border: 1px solid red; */
  background: #fffef5;
border: none;



}

#btnBack img{
  width: 70%;
  height:auto;
}


#btnLeft img{
  height: 2.8vw;
}

#btnRight img{
    height: 2.8vw;

}

 
#btnLeft{
  position: absolute;
  top: 33%;
  width: 100%;
height:4vw;
border: none;
  background: #fffef5;



}

#btnRight{
   position: absolute;
  top: 66%;
  width: 100%;
  height: 4vw;
border: none;
  border-radius: 0 0 10px 0;

  background: #fffef5;


  /* border: 1px solid red; */

}

@media (max-width: 1000px) {
  #btnBack img{
  width: 70%;
  height:auto;
}


#btnLeft img{
  height: 5vw;

}

#btnRight img{
    height: 5vw;

}

}

@media (max-width: 768px) {

.nextprevback{
  width: 8vw;
  height:50vw;
  
}

  #btnBack img{
  width: 80%;
  height:auto;
}


#btnLeft img{
  height: 7vw;

}

#btnRight img{
    height: 7vw;

}

}

.changeDoc img{
width: auto;
height: 60%;
border: none;
}


.fotoBox{
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%);
  width: 80%;
  height: 800px;
  /* border: 1px solid red; */
  z-index: 100;
}

.contenitore{
  position: absolute;
  top: 0;
  left: 0;

width: 100%;
height: 100%;
border: 5px solid rgb(238, 255, 0);
}



.container {
background: var(--bg-gradient2);
display: grid;
width: 100%;
  margin-top: 50px;

grid-template-columns: 2fr 3fr 3fr 3fr 3fr 2fr;
grid-template-rows: 25vw min-content 10px  min-content 10px min-content;
/* grid-column-gap: 3px; */
/* grid-row-gap: 3px; */
/* margin-top: 30px; */
}


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






@media (max-width: 1000px) {
  .container{
grid-template-columns: 0px 3fr 3fr 3fr 3fr 0px;

  }
  .articolo{
    padding:0;
  }
  .textITA{
    padding: 0;
  }
  .imgBox{
    padding: 0;
  }
 
}
/* ------------------- HEADER --------------------------- */
.header{
  position: relative;
  grid-column: 1 / 7;
  grid-row:1/3;
  display: flex;
  /* border: 10px solid rgb(255, 238, 0); */
  /* border: 5px solid rgb(255, 242, 0); */
  /* border: 1px solid rgb(191, 255, 0); */
  padding-bottom: 50px;
  /* margin-bottom: 50px; */
  
}
.hdrlogoBox{
  position: absolute;
width: 20%;
height: 100%;
display: flex;
/* border: 1px solid red; */
justify-content: right;
align-items: center;
  padding-left: 50px;

}

.hdrLogo{
position: absolute;
  top: 50%;
  right: 5%;
  transform: translate(0, -50%);
   width: 70%;
  height: auto;  
  /* border: 1px solid red; */

}

.hdrLogo:hover{
  cursor: pointer;
}

.titleBox{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  grid-column: 1/7;
  width: 60%;
  height: 100%;
  /* border: 3px solid rgb(89, 255, 0); */
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  padding-top: 4vw;
}

.mainTitle{
font-family: 'Expletus Sans';
font-weight: bold;
font-size: clamp(1vw, 5vw, 8vw);
color:white"

}
.subMainTitleBox{
  padding-top: 50px;
}
.subMainTitle{
font-family: "Exo", "Arial Narrow", Arial, sans-serif;
font-weight: 500;
font-size: clamp(1.5vw, 1.5vw, 2vw);
/* border: 1px solid red; */
}

@media (max-width: 1200px) {
.subMainTitle{
font-size: clamp(1.5vw, 1.7vw, 2vw);
}
}

@media (max-width: 900px) {
.subMainTitle{
font-size: clamp(1.5vw, 1.8vw, 2vw);
}
}

/* ----------------------------------STRISCIA-----------------------------------------------  */


.striscia{
  /* background: aqua; */
  grid-column: 1 / 7;
  grid-row: 3/ 4;
  align-content: center;
  text-align: center;
  height: clamp(2vw, 2.5vw,  3.8vw);
  margin-bottom: 30px;
}

.strisciaUNIBA {
  background-color: rgb(3,136,21);
}
.strisciaINAF {
  background-color: rgb(236,0,0);
}
.strisciaUNINA {
  background-color: rgb(51,139,212);
}
.strisciaUNIME {
  background-color: rgb(222, 149, 14);
}

/* .strisciaNEUTRA {
  background-color: yellow;
} */
#striscITA{
  display: flex;
  justify-content:space-between;
  align-items:center;
  padding: 0 3vw;
}

/* .titSX{
  
  font-family: Exo;
  font-size: 1.2vw;
}

.istituto{
  font-family: Exo;
  font-size: 1.2vw;


} */

 /* ----STRISCIA---------  */


.titoli{
  /* background: #fffef5;
  color: black;
  display: flex;
  align-items: start;
  width:100%; */
  /* height: auto; */

  /* padding:50px 100px 20px 100px; */
  /* border-radius: 25px 25px 0 0; */
  /* border: 10px solid rgb(246, 255, 0);
/*  */

}

.IMGBox{
  grid-column:2/4;
  grid-row: 4/5;
 display: flex;
  align-items: center;
width: 100%;
height: auto;
/* object-fit: cover; */
/* border: 10px solid rgb(51, 255, 0); */
/* margin-left:60px; */
padding-left: 50px;
/* border-top: 50px solid #fffef5; */
/* margin-top: 20px; */
padding-top:35px;
margin-top: 1.6vw;
align-content:center;
 background: #fffef5;
 border-radius: 15px 0 0 0;
 overflow: hidden;
 z-index: 121;


}

.IMGBox img{
  /* width: 10%; */
  border-radius: 15px;
 box-shadow: -4px 1px 12px rgba(0, 0, 0, 0.25);
 cursor: pointer;
 /* border: 1px solid red; */
 z-index: 121;
}

.imgcapsule{
  /* position: absolute; */
  width: fit-content;
  height: 98%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* border-radius: 15px; */
 /* box-shadow: 4px 1px 12px rgba(0, 0, 0,  0.25); */

  /* border: 5px solid red; */

}

.titIMG{
  transition: transform 3s ease;
z-index: 110;
}

.titIMG img{
  z-index: 110;
}


.titIMG:hover{
  transform: scale(1.2);
}

.titBox{
  grid-column:4/6;
  grid-row: 4/5;
  /* position: relative; */
  display: flex;
  /* justify-content: center; */
  align-items: center;
  width: 70%;
  /* border: 10px solid rgb(246, 255, 0); */
}




.titBox p{
  /* color: red; */

}

.contITA{
  /* border: 1px solid red; */
}




























.cuscinetto{
  /* background: rgb(111, 255, 0); */
  grid-column: 1 / 7;
  grid-row: 3 / 4;
  /* border: 10px solid red; */
  height: 20px;
  /* border: 1px solid red; */
}

.strisciaTxt{
font-family: 'Exo';
font-size: clamp(1.2vw, 1.4vw, 2vw);
}





@media (max-width: 1200px) {
  .strisciaTxt{
font-family: 'Exo';
font-size: clamp(1.5vw, 1.5vw, 2vw) ;

}


}

@media (max-width: 768px) {
    .strisciaTxt{
font-family: 'Exo';
font-size: clamp(2.0vw, 2.0vw, 2.8vw) ;
}
#striscITA{
padding: 0 30px;
}
.striscia{
  height: 4vw;
}



}



/* ----------TITOLI------------ */




.titContent{
  grid-row: 4/5;
  /* border: 10px solid rgb(0, 251, 255); */
  /* margin-left: 20px; */
  width: 100%;
  /* height: fit-content; */
  padding-left: 50px;
  grid-column: 4/6;
  display: flex;
  align-items: center;
  padding-right:6vw;
  padding-top: 50px;
  margin-top: 1.6vw;

  /* padding-top: 200px; */
  background: #fffef5;color:black;
  /* border-bottom: 50px solid #fffef5; */
  border-radius: 0 15px 0 0;
  /* border: 1px solid red; */
  

}
  

.titH3 {
  font-size: clamp(1.3vw, 1.6vw, 1.5vw);
  font-family: "Exo";
}

.subTitle{
   font-family: "Exo";
  font-size: clamp(0.5vw, 1.3vw, 1.8vw);
  line-height: 1;
  font-weight: 400;
  grid-column: 3/5;

  text-align: left;
  /* padding-right: 100px; */
/* border: 1px solid red; */
}

.crediti{
   font-family: "Exo";

  font-size: clamp(0.7vw, 1.2vw, 1.5vw) !important;
  font-weight: 400;
  text-align: left;
  padding-right: 100px;
  line-height: 1.6;
}


@media (max-width: 1200px) {
  .subTitle {
  font-family: "Exo";
  font-size: clamp(0.5vw, 1.2vw, 1.8vw);
  line-height: 1;
  font-weight: 400;
  grid-column: 3/5;

  text-align: left;
  /* padding-right: 100px; */
/* border: 1px solid red; */
}

}

@media (max-width: 1000px) {
  .titH3 {
  font-size: clamp(0.5vw, 1.8vw, 1.8vw) !important;
  font-family: "Exo";
}

.subTitle {
  font-family: "Exo";
  font-size: clamp(0.5vw, 1.5vw, 1.8vw);
  line-height: 1;
  font-weight: 400;
  grid-column: 3/5;

  text-align: left;
  /* padding-right: 100px; */
/* border: 1px solid red; */
}
.crediti {
  font-family: "Exo";

  font-size: clamp(0.7vw, 1.5vw, 1.9vw) !important;
  font-weight: 400;
  text-align: left;
  padding-right: 100px;
  line-height: 1.6;
}


}




 
.crediti {
  font-family: "Exo";

  font-size: clamp(0.7vw, 1vw, 1.2vw);
  font-weight: 400;
  text-align: left;
  padding-right: 100px;
  line-height: 1.6;
}

.tipologia {
  font-family: "Exo";
    font-size: clamp(0.7rem, 0.85vw, 1.2rem);

  font-weight: 400;
  text-align: left;
  padding-right: 100px;
}



/* ----------------------- ARTICOLO ------------------------------ */


.titoloArticolo {
  color: black;
  font-weight: 700;
  font-family: "Colaborate";
  font-size: clamp(1.2rem, 1.6vw, 2vw);
  /* border: 1px solid red; */
}

@media (max-width: 1000px) {
  .titoloArticolo {
  color: rgb(0, 0, 0);
  font-weight: 700;
  font-family: "Colaborate";
  font-size: clamp(1.2rem, 2.2vw, 2.5vw);
  /* border: 1px solid red; */
}

.titContent{
  padding-left: 20px}

.titH3{
  font-size: clamp(1.2rem, 1.8vw, 2.5vw);

}
.articolo p{
  font-size: clamp(1.2rem, 2.2vw, 2.5vw);

}
.biblioTXT{
  font-size: clamp(1.2rem, 3vw, 3vw);
  color: red;

}
}


@media (max-width: 768px) {
  .titH3{
  font-size: clamp(1.2rem, 2.2vw, 2.5vw);
}

.crediti{
 font-size: clamp(1.8vw, 24vw, 2.4vw) ;

}
}



/* ------------FINE TITOLI------------- */







/* ------------ARTICOLO------------- */


.articolo{
  grid-column: 2/6;
  grid-row: 5/6;
  background: #fffef5;
  color: black;
  padding:  0 1vw;
  border-radius: 0 0 25px 25px;
  /* border: 1px solid red; */

}

#textITA {
  /* position: absolute; */
  top: 0;
  width: 100%;
  height: fit-content;
   font-family: "Colaborate";
  /* font-size: clamp(0.5em, 1.6vw, 2rem);
   */
  font-size: clamp(1em, 1.4vw, 1.8vw);

  line-height: 1.6;
  /* border: 5px solid red; */
  padding: 0 50px;

  opacity: 1;
}

#textITA p{
  font-family: 'Colaborate' !important;
}

.autore{
  font-size: clamp(1em, 1.4vw, 1.8vw);

  font-weight: 500;
}
/* 
.biblioTitle{
  font-size:clamp(0.8rem, 1.5rem, 2rem);
  font-weight: 900;
  
} */

.biblioTitle {
  font-family: 'Colaborate';

  font-weight: 600;
  font-size: clamp(1vw, 1vw, 1.5vw);
  list-style-type: none;
  margin-bottom: 15px solid rgb(0, 0, 0);
}

.biblioTXT {
  font-family: 'Colaborate' !important;
font-weight: normal !important;
   font-size: clamp(1.2vw, 1.2vw, 1.5vw);

  color: black;
  list-style-type: none;
  /* border: 2px solid red; */
  border-bottom: 5px solid rgba(255, 255, 255, 0);

  color: black;
}



.footer{
  grid-column: 1/7;
  grid-row: 7/8;
}


/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ---------------------------------- MEDIA-QUERY ------------------------------------------ */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */


@media (max-width: 1200px) {
  .autore{
    font-size: clamp(1em, 1.8vw, 2.8vw);

  }
}



@media (max-width: 1000px) {
  .autore{
    font-size: clamp(2vw, 2vw, 2vw);

  }
  .biblioTXT{
    font-size: clamp(2.3vw, 2.3vw, 3vw);
  }
.striscia{
  margin-bottom: 0;
  margin-top: 15px;
}

}

@media (max-width: 800px) {
  .container{
  margin-top:40px;
}

.autore{
     font-size: clamp(0.8em, 2.8vw, 3vw);

}
.biblioTXT{
    font-size: clamp(2vw, 2.8vw, 3vw);
  }

  .biblioTXT {
  font-family: 'Colaborate' !important;
font-weight: normal !important;
   font-size: clamp(1.2vw, 2w, 2.5vw);
  color: black;
}

.biblioTitle {
 
  font-size: clamp(0.5vw, 0.5vw, 1.5vw);
  /* border: 1px solid red; */

}
.IMGBox{
  margin-top: 0;
}

.titContent{
  margin-top: 0;
}
.striscia{
  margin-bottom: 0;
  margin-top: 20px;
}
}

@media (max-width: 768px) {
.autore{
     font-size: clamp(1em, 2.7vw, 4vw);

}
}
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------  FINE ------------------------------------------------ */
/* ---------------------------------- MEDIA-QUERY ------------------------------------------ */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */