/* @font-face {
  font-family: 'ColaborateReg';
  src: url(/font/Colaborate/Colaborate-Regular.ttf);
} */
/* @font-face {
  font-family: 'Expletus Sans';
  src: url('/font/expletus-sans/Expletus Sans-Bold.ttf') format('woff2');
  font-weight: normal;
  font-style: normal;
} */

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

#megaTabBox {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: scroll;
  /* border: 10px solid rgb(255, 157, 0); */
  background: var(--bg-gradient2);

}
  
#megaTabBox::-webkit-scrollbar {
    display: none;
}

.gridContainer{

position: absolute;
top: 0;
  width: 100%;
  display: grid;
  background: var(--bg-gradient2);
padding-top: 70px;
  /* gap:25px; */
  grid-template-columns: 1fr 2fr 3fr 1fr;
  grid-template-rows: 20vw min-content repeat(12, min-content)  100px min-content;
  /* margin-top: 35px; */
  grid-template-areas:
  " intestazione intestazione intestazione intestazione"
    "striscia striscia striscia striscia"
    ". imgTitle0  txtTitle0  ."
    ". imgTitle1  txtTitle1  ."
    ". imgTitle2  txtTitle2  ."
    ". imgTitle3  txtTitle3  ."
    ". imgTitle4  txtTitle4  ."
    ". imgTitle5  txtTitle5  ."
    ". imgTitle6  txtTitle6  ."
    ". imgTitle7  txtTitle7  ."
    ". imgTitle8  txtTitle8  ."
    ". imgTitle9  txtTitle9  ."
    ". imgTitle10 txtTitle10 ."
    ". imgTitle11 txtTitle11 ."
    " cuscinetto cuscinetto cuscinetto cuscinetto"
    "footer footer footer footer";
    
}


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



/* --------------------- gridContainer -------------------------------- */


.gridContainer div {
  text-align: center;
  /* border: 1px solid red; */
}

/* -------------------------HEADER ------------------------ */



.header {
  position: relative;
   top: 0;
  /*left: 0; */
  grid-area: intestazione;
  /* grid-row: 1 / 2; */
  display: flex;
  /* flex-direction: column; */
  justify-content: right;
  /* border: 10px solid red; */
}



 .hdrlogoBox{
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 95%;
  grid-area: hdrLogoBox;
  justify-items: left;
  align-content: left;
  padding-top: 10px;
  padding-left: 10px;
  grid-row: 1 / 2;
  /* border: 5px solid red; */
 }

.hdrLogo{
  position: absolute;
  top: 45%;
  right: 5%;
  transform: translate(0%, -50%);

  grid-area: hdrLogo;
  width: 70%;
  height: auto;  
  /* border: 1px solid red; */
}


/* ------------------------- /FINE HEADER/ ------------------------ */


.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: 2vw;
}

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

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

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


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

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

.striscia {
  position: relative;
  grid-area: striscia;
  /* grid-column: 1/5; */
  grid-row: 2 / 3;
  /* height: 50px; */
  height: 2.5vw;

  /* border: 10px solid red; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  

}


.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);
}

#striscITA {
  /* position: absolute;
  top: 0; */
  width: 100%;
  /* height: clamp(2vw, 2.5vw,  3.5vw); */

  /* left: 50%; */
  /* transform: translate(-50%,); */
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 1;
  font-family: "Exo";
  /* font-size: clamp(0.8vw, 1.2vw, 1.5vw); */
  font-weight: 500;
  padding: 0 50px
  
}

#striscENG {
  position: absolute;
  top: 0;
 
  /* left: 50%; */
  /* transform: translate(-50%,); */
  display: flex;
  justify-content: space-between;
  opacity: 0;
}

.strisciaTxt{
font-size: clamp(1.6vw, 1.4vw, 2vw);

  
}

.titoloSX {
 /* position: absolute;
  top: 50%;
  left: 0; */
  /* transform: translate(-50%); */
  color: white;
  background: none;
  font-family: "Exo";
  /* font-size: 1.2vw; */
  font-weight: 500;
font-size: clamp(1.5vw, 1.5vw, 2.5vw);


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

.istituto {
  /* position: absolute; */
  /* transform: translate(-50%); */
  color: white;
  background: none;
  font-family: "Exo";
  /* font-size: 1.2vw; */
font-size: clamp(1.5vw, 1.5vw, 2.5vw);


  font-weight: 500;
}


#istitutITA {
  opacity: 1;
}

#istitutENG {
  opacity: 0;
}

#sponsorBoxITA {
}
#sponsorBoxENG {
  opacity: 0;
}



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



/* ------------------- INDICE ------------------------ */

.imgTitle{
  position: relative;
  /* align-content:center; */
  /* justify-items: center; */
  aspect-ratio:16 /9;
  /* max-height: 400px; */
  width:30vw;
  height:100%;
  object-fit: cover;
  /* overflow: hidden; */
  /* outline: 100px solid white; */
  background: #fffef5;
  /* border: 1px solid red; */
  /* margin-bottom: 25px; */


  
  

/* border-width: 10px 20px 10px 10px; */
/* border-color: white; */
/* border: 1px solid red; */

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

.imgTitle img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: auto;
  border-radius: 15px;
 box-shadow: 4px 1px 12px rgba(0, 0, 0,  0.25);
  /* object-fit: contain; */
  
  /* border: 5px solid red; */
}

.txtTitle{
  display: flex;
  align-items: center;
  padding: 0 50px;
  font-family: 'Expletus Sans';
  font-weight: 600;
  font-size: clamp(1.2vw, 1.7vw, 2vw);

  /* border: 1px solid red; */



  /* align-content:start; */
  /* justify-items: right; */
  /* outline: 100px solid white; */
  background: #fffef5;
/* border: 1px solid red; */


  
}

.txtTitle a{
  text-decoration: none;
  color: rgb(3, 3, 3);
  text-align: left;
  font-family: 'Expletus Sans';
  font-weight: 600;
  font-size: clamp(1.2vw, 1.7vw, 2vw);

  

}

.txtTitleITA{
  opacity: 1;
}
.txtTitleENG{
  opacity: 0;
  visibility: collapse;
}


.cuscinetto{
  grid-area: cuscinetto;
grid-row:14/16;
  width: 100%;
  height:100pxvw;
  margin-bottom: 150px;
}





.footer{
  position: relative;
  bottom:100px;
  grid-area: footer;
  /* grid-column: 1 / 5; */
  grid-row: 16/17 ;
  /* width: 100%; */
  /* height: 100px; */
  /* border-top: 5px solid rgba(120, 120, 222, 0.637); */

  /* border: 1px solid red; */
  /* display: flex;
  align-items: center; */
}

.footRespBox{
  /* position: absolute; */
top: 10px;
width: 100%;
height: 100%;
  /* border: 1px solid red; */
}


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


/* ---------------  mediaquery 1000px --------------- */


@media (max-width: 1000px) {
  .gridContainer{
  grid-template-columns:14fr 14fr;
  grid-template-rows: 200px min-content  repeat(12, min-content)  20px min-content;
/* background: #fffef5; */
    grid-template-areas:
   "intestazione intestazione"
    "striscia striscia"
    "imgTitle0  txtTitle0 "
    "imgTitle1  txtTitle1 "
    "imgTitle2  txtTitle2 "
    "imgTitle3  txtTitle3 "
    "imgTitle4  txtTitle4 "
    "imgTitle5  txtTitle5 "
    "imgTitle6  txtTitle6 "
    "imgTitle7  txtTitle7 "
    "imgTitle8  txtTitle8 "
    "imgTitle9  txtTitle9 "
    "imgTitle10 txtTitle10"
    "imgTitle11 txtTitle11"
    " footer footer";
  }

  .imgTitle{
    width: 100% !important;
    height: fit-content !important;
    border-radius: 0 0 0 0 !important;
  } 
  
  .imgTitle img{height:80% !important;}

  .txtTitle{
    border-radius: 0 0 0 0 !important;
  }

  .txtTitle a{
  text-decoration: none;
  color: rgb(3, 3, 3);
  text-align: left;
  font-family: 'Expletus Sans';
  font-weight: 600;
  font-size: clamp(1.2vw, 2.5vw, 2.5vw) !important;

  

}



.strisciaTxt{
  font-size: clamp(1.5vw, 2.5vw, 2.5vw);

}

#striscITA {
  /* position: absolute;
  top: 0; */
  width: 100%;
  /* left: 50%; */
  /* transform: translate(-50%,); */
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 1;
  font-family: "Exo";
  font-weight: 500;
  padding: 0;
  /* border: 1px solid red; */
}

#striscENG {
  position: absolute;
  top: 0;
 
  /* left: 50%; */
  /* transform: translate(-50%,); */
  display: flex;
  justify-content: space-between;
  opacity: 0;
  padding: 0 10px

}

.titoloSX {
 /* position: absolute;
  top: 50%;
  left: 0; */
  /* transform: translate(-50%); */
  color: white;
  background: none;
  font-family: "Exo";
  font-size: 2.2vw;
  font-weight: 500;
  margin-left: 15px;
  
  /* border: 1px solid red; */
}

.istituto {
  /* position: absolute; */
  /* transform: translate(-50%); */
  color: white;
  background: none;
  font-family: "Exo";
  font-size: 2.2vw;

  font-weight: 500;
  margin-right: 15px;
}


} /*  fine mediaquery 1000px */





  @media (max-width: 768px) {
  .gridContainer{
    display: grid;
  grid-template-columns:1fr;
  grid-template-rows: 25vw min-content  repeat(24, min-content) min-content;
/* background: #fffef5; */
    grid-template-areas:
   "intestazione"
    "striscia"
    "imgTitle0"
    "txtTitle0"
    "imgTitle1"
    "txtTitle1"
    "imgTitle2"
    "txtTitle2"
    "imgTitle3"
    "txtTitle3"
    "imgTitle4"
    "txtTitle4"
    "imgTitle5"
    "txtTitle5"
    "imgTitle6"  
    "txtTitle6"
    "imgTitle7"  
    "txtTitle7"
    "imgTitle8"  
    "txtTitle8"
    "imgTitle9"  
    "txtTitle9"
    "imgTitle10" 
    "txtTitle10"
    "imgTitle11"
    "txtTitle11"
    " footer"
  }

  .imgTitle{
    /* height:fit-content */
    /* border: 1px solid red; */
  }
.txtTitle{
  width: 100%;
  height: 100%;
  /* border: 1px solid rgb(0, 255, 136); */
  display: flex;
  justify-content: center;
  margin-top: 0 !important;

}
.txtTitle p{
  font-size: 3vw;
}

.footer{
  grid-row: 27 / 28;
}

.imgTitle img{
  height:70% !important;
  width: auto !important;
}

.strisciaTxt{
  font-size: 3vw;
}

#striscITA{
padding: 0 30px;
}

#striscENG{
padding: 0 30px;
}




} /*  fine mediaquery 768px */



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