.tia-body{
 font-family: Verdana, Geneva, Tahoma, sans-serif;
 /*font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";*/
  max-width:1200px;
  display: block;
  margin:auto; 
}

h1{
  color:red!important;  
}

.text-justify {
  text-align: justify !important;
}

#torneo, #storia-tia, #albodoro, #elencodiscipline, #programma {
margin-top:15px!important;
margin-bottom: 15px!important;
}
.tia-img-cover{
display:block;
margin-left:auto;
margin-right: auto;
max-width:960px!important;
}
.tia-img-programma{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}


.tia-logo{
    display: block;
    width:15%;
    margin:65px auto 35px auto;
    border-radius: 0px 0px 0px 100px;
    transform: rotate(345deg);
}

.tia-par{
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  max-width: 960px;
}

.tia-longtext {
    text-align: justify;   
}

.tia-headings{
    text-align: center;
    text-decoration: none;
}

.tia-lists ul,li {
  text-align: center;
  line-height: 1.8rem;
  font-size: 0.88rem;
  list-style:none;
  padding:0;
  margin:0;
}

/*   DIV TABLE  */
.divTable{
	display: table;
	width: 100%;
}

.divTableRow {
	display: table-row;
}

.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}

.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
    text-align: center;
}

.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}

.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}

.divTableBody {
	display: table-row-group;
}

/*  TT  */
#toTOP {     
    position: fixed; 
    bottom: 5px;    
    z-index: 99; 
    border: none;
    outline: none;
    background-color: grey; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 30px; 
    font-size: 18px;    
    display: block;   
    width:20px;        
  }  

  #toTOP:hover {
    background-color: red;
  }

/* INIZIO SIDEBAR MENU */
.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  /*background-color: #fbf4f4b5;*/
  background-color:#fbf4f4;
  position: fixed;
  margin-top:20px!important;
  top:33%;
  overflow: auto;
  z-index:9;
  text-align: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-blend-mode: color;
} 

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}  

.sidebar a.active {
  background-color: red;
  color: white;
}  

.sidebar a:hover:not(.active) {
  background-color: #e0dbc7;
  color: red;
  font-weight: 600;
}

.tia-totop{
  display: none; 
  position:fixed;
  right:10%;
  z-index: 999;

}

.cont60 {
  width: 60% !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media screen and (max-width: 1301px) {

  .sidebar {
    width: 100%;
    height: auto;
   /* position: relative;*/
   position: sticky!important;
   bottom:0!important;
   font-size: 2rem;  
  }

  .sidebar a {
    text-align: center;
    float: none;   
  } 
}  

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
    font-size: 200px;     
  }
 
}

@media screen and (max-width: 481px) {
  .sidebar a {
    text-align: center;
    float: none;
    font-size: 20px;     
  }

  .cont60 {
    margin-left: 0%!important;
    
  }
}

/* FINE SIDEBAR MENU */


/*   FLIP CARD */


.flip-card {
	background-color: transparent;
	width: 100%!important;
	height: 210px!important;  
	perspective: 1000px;
	margin-bottom:55px;
  }
  
  .flip-card-inner {
	position: relative;
	width: 100%;
	height: 220px;
	text-align: center;
	transition: transform 0.6s;
	transform-style: preserve-3d;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  }
  
  .flip-card:hover .flip-card-inner {
	  max-width: 650px;
	height: 220px!important;
	transform: rotateY(180deg);
  }
  
  .flip-card-front, .flip-card-back {
	position: absolute;
	width: 100%;
	height:170px!important;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
  }
  
  .flip-card-front {
	/*background-color: #bbb;*/
	color: black;
  }

  .flip-card-front  img{
    width:100%!important;
    margin-top: 10px;
    height:170px!important;
    border:unset!important;
    border-radius:0px!important;
    }
  
  .flip-card-back {	
  margin-top:10px!important;  
	background-color: #transparent;
	color: black;  
	transform: rotateY(180deg);
  
  }
  
  .flip-card-back p {
	  margin-left:5px;
	  margin-right:5px;
	  text-align: justify;
	  text-transform: none!important;
	  line-height: 2;
  }

  .flip-card-front-title {
    display: block;			
    margin-top: 10px;
    margin-bottom: 10px;		
    margin-left: auto;
    margin-right: auto;
    font-weight: 600;
    font-size: 0.9rem!important;
}

/* setting up maxwidth and margins */
.custom-row {
  max-width: 960px!important;
  /*margin: 0 -5px;*/
  margin-left: auto!important;
  margin-right: auto!important;
  }
  
  /* clear floats after the columns */
  .custom-row:after {
  content: "";
  display: table;
  clear: both;
  }

/* imposta le colonne */
.colonna-a-2 {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding: 0 10px;
  margin-bottom:50px;
  }


  .colonna-a-4 {
    box-sizing: border-box;
    float: left;
    width: 25%;
    padding: 0 10px;
    margin-bottom:50px;
    }

.colonna-a-5 {
  box-sizing: border-box;
  float: left;
  width: 20%;
  padding: 0 10px;
  margin-bottom:50px;
  }


  /* Generic cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #ffffff;
  border-radius:20px!important;
  color:black!important;
  }
  
  .card:hover {
  position:relative;
  top:25px;
  border-radius: 3%;
  transform: scale(1.5);    
  -webkit-filter: brightness(100%);
  z-index: 99999; 
  }

  .card a:visited{
    color:black;
    }

  
  /* card multimedia */
  .multimedia-card {
      background-color: transparent;
      width: 100%!important;
      height: 300px!important;  
      perspective: 1000px;
      margin-bottom:55px;
    }
  
    .multimedia-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s;
      transform-style: preserve-3d;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }
  
    .multimedia-front {   
      color: black;
    }

.programma {

}

.programma img{
  max-width:60%;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}


  /* media queries */
  @media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3) { 
.sidebar {
  width:100%|important;
}
    }

    @media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) { 
     
    }


    @media only screen and (max-width: 431px) {
      #torneo, #storia-tia, #albodoro, #elencodiscipline, #programma {
        width:400px!important;
        margin-left: 5px!important;
        margin-top:15px!important;
        margin-bottom: 15px!important;
        
        }


      .tia-body{
  max-width:400px!important;
  margin:0!important;
}

.tia-img-cover, .tia-img-programma {
  margin-left:10px!important;
  width:400px!important;
}


.custom-row {
  max-width: 360px !important;
  margin-left: 45px !important;  
}


.colonna-a-5 {
  box-sizing: border-box;
  float: left;
  width: 90%;
  padding: 0 10px;
  margin-bottom: 50px;
}
.colonna-a-2 {
width:100%!important;
}

.divTable {
  display: table;
  width: 80%!important;
}
.tia-totop{
  display: block;
}
    }