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




   @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: #5d89a2;


}
.megaBox{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
 
  background: #5d89a2;
animation-name: switchon;
animation-duration: 2s;
}

@keyframes switchon{
    from{opacity: 0;}
    to{opacity: 1;}
}

.megaBox::-webkit-scrollbar {
  display: 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;
grid-template-columns: 2fr 3fr 1fr 3fr 3fr 2fr;
grid-template-rows: 18vw min-content 20px min-content min-content 20px min-content !important;
/* grid-column-gap: 3px; */
/* grid-row-gap: 3px; */
margin-top: 30px;
}

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


@media (max-width: 768px) {
  .container{
grid-template-rows: 18vw min-content 5px 25vw min-content 5px min-content !important;

  }
}

/* ------------------- HEADER --------------------------- */
.header{position: relative;
  grid-column: 1 / 7;
  display: flex;
  /* border: 10px solid rgb(255, 238, 0); */
  
}
.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; */

}

.titleBox{
  position: absolute;
  left: 50%;
  transform: translate(-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:rgb(36, 97, 97)"

}
.subMainTitleBox{
  padding-top: 50px;
}
.subMainTitle{
font-family: "Exo", "Arial Narrow", Arial, sans-serif;
font-weight: 500;
font-size: 1.5vw;

/* 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);
}
}

.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;
 display: flex;
 justify-content: left;
  align-items: center;
width: 100%;
height: 100%;
 border-radius: 15px 0 0 0;
  background: #fffef5;

 /* background:rgba(255, 255, 255, 0.379); */

}

.titIMG{
  /* width: 10%; */
  border:50px solid rgba(255, 255, 255, 0);
  border-radius: 15px;
 /* box-shadow: -4px 1px 12px rgba(0, 0, 0, 0.25); */
 width: 90%;
 /* margin-left: 50px; */
/* margin-top: 50px; */

 /* border: 1px solid red; */
}



.articolo{
  background: #fffef5;
  color: black;
  padding:  0 1vw;
  border-radius: 0 0 25px 25px;
  /* border: 1px solid red; */
}


.titBox{
  display: flex;
  /* justify-content: center; */
  align-items: center;
  width: 70%;
  color: rgb(36, 97, 97);
  /* border: 10px solid rgb(246, 255, 0); */
}

.titoloPresentazione{
    color: rgb(0, 0, 0);
    text-align:left;
    font-size: clamp(0.8rem, 1.4vw, 2vw) ;
    font-family:'Expletus Sans';
    /* font-weight: bold; */
}


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

}

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



.spimgBox{
width: 100%;
/* height: fit-content; */

display: flex;
justify-content: space-between;
padding: 0 50px;
/* border: 5px solid red; */
/* background: yellow; */
}

.indexBox{

}


.spimg{
  width: 20%;
height:20%
}

.indexImgBox{
  height: vw;

}

.homeBox{
  /* border: 1px solid red; */
  width: 100%;
  height: 600px;
}













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


.striscia{
  /* background: aqua; */
  grid-column: 1 / 7;
  grid-row: 2 / 3;
  align-content: center;
  text-align: center;
  height:50px;
}

.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 50px;
}

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

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


} */

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


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



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

}
.striscia{
  height: 3vw;
}


}

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



}


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




.titContent{
  /* border: 10px solid rgb(0, 251, 255); */
  /* margin-left: 20px; */
  width: 100%;
  /* height: 100px; */
  /* height: fit-content; */
  /* padding-left: 30px; */
  grid-column: 4/6;
  display: flex;
  justify-content: left;
  align-items: center;
  padding: 10vw 60px 5vw 0;
  /* padding-right:300px; */
  /* padding-top: 100px; */
  color: rgb(36, 97, 97);
  /* padding-top: 200px; */
  background: #fffef5;color:black;
  /* border-bottom: 50px solid #fffef5; */
  border-radius: 0 15px 0 0;
  /* padding-bottom:6vw; */
  /* background:rgba(255, 255, 255, 0.379); */
  font-family: 'Expletus Sans';
  font-size:5em";
  
  

}

.titContent p{
  
  color: rgb(36, 97, 97);
  font-size: clamp(0.4rem, 1.2vw, 1.5vw);

}

  

.titH3 {
  font-size: clamp(0.4rem, 1.2vw, 1.5vw);
  font-family: "Exo";
}


.subTitle {
  font-family: "Exo";
  font-size: clamp(0.4rem, 1vw, 1vw);
  line-height: 1.2;
  font-weight: 400;
  text-align: left;
  /* padding-right: 100px; */
/* border: 1px solid red; */
}




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


.titoloArticolo {
  color: black;
  font-weight: 700;
  font-family: "Colaborate";
   font-size: clamp(0.5em, 1.3vw, 2rem);

  /* border: 1px solid red; */
}




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







/* ------------ARTICOLO------------- */
.articolo{
  grid-column: 2/6;
  grid-row: 5/6;
  /* border: 1px solid red; */
  padding-bottom: 3px;

}

#textITA {
  /* position: absolute; */
  top: 0;
  width: 100%;
  height: fit-content;
   font-family: "Colaborate";
  font-size: clamp(0.5em, 1.3vw, 2rem);
  line-height: 1.6;
  /* border: 5px solid red; */
  padding: 0 50px;
  background: #fffef5;


  opacity: 1;
}

.autore{
  font-size: clamp(1.5vw, 1.5vw, 2rem);

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

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

.biblioTXT {
  font-size: clamp(0.5rem, 1.2vw, 2rem);
  color: black;
  list-style-type: none;
  /* border: 2px solid red; */
  border-bottom: 5px solid rgba(255, 255, 255, 0);

  color: black;
}


/* .homeIMG:{
  transform: scale(1.5);
  transition: 5s;

} */


.homeIMG{
  cursor: pointer;
  transition: transform 5s ease; 
}

.homeIMG:hover{
  transform: scale(1.5);
  /* transform: scale(1.5); */
  /* transform-origin: bottom left; */
  /* transition: 4s; */

}







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

.indexImgBox{
  display: flex;flex-direction:column;
   justify-content:Left;
   /* overflow:hidden; */
  /* border: 5px solid rgb(255, 196, 0); */
  /* border: 1px solid red; */
}

.imgg{
  width: 26vw;
  height:5vw;
  margin-right:30px;
  border: 5px solid #fffef5;
  overflow: hidden;
  /* border: 3px solid red; */


}

.homeIMG{
  width: 100%;

}



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

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

.introTxt{
  font-size: clamp(0.5vw, 2vw, 2.5vw);

}

  .textITA{
    padding: 0;
  }
  .imgBox{
    padding: 0;
  }
  .strisciaTxt{
  font-size: clamp(0.5vw, 2.5vw, 2.8vw);

  }
.titoloPresentazione{
  
    font-size: clamp(0.8rem, 2vw, 2vw) ;
   
}

.indexImgBox p{
    font-size: clamp(0.8rem, 3vw, 2vw) !important;
    

}
.imgg{
  width: 35vw !important;
  height:7vw !important;
  margin-right:30px;
  border: 5px solid #fffef5;
  overflow: hidden;
  /* border: 3px solid red; */
}
.autore{
    font-size: clamp(1.5vw, 2.3vw, 2.5vw);

}
}

@media (max-width: 768px) {
  .indexImgBox{margin-left: 10px !important;
  width: 50%;
  }

  .textITA{
    margin: 0 20px !important;
  }
}
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------  FINE ------------------------------------------------ */
/* ---------------------------------- MEDIA-QUERY ------------------------------------------ */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */