.org img{max-width:100%;}
.org .ceo {width:150px; height:150px; margin:0 auto 45px auto; background-color:#3b3786; color:#fff; border-radius:50%;
text-align:center; padding-top:60px; font-size:18px; font-weight:500;}
.org .flex {display:flex; flex-wrap: wrap;  justify-content: space-between; }
.org .flex .item {margin:0; flex: 1; padding:0px; text-align:center; font-size:16px;}
.org .flex .item .tit{border:1px solid #dfdfdf; box-shadow:1px 2px 7px rgb(0,0,0,0.1);  padding:15px 5px; 
font-weight:500; margin:10px 10px; color:#fff; background:#7e7e95; font-size:18px;}
.org .flex .item .tit2 {background:#7e9d91 !important;}
.org .flex .item .txt{border:1px solid #dfdfdf; box-shadow:1px 2px 7px rgb(0,0,0,0.1); padding:5px 10px; 
font-weight:500; margin:20px 10px;}
.org .flex .item .txt li {border-bottom:1px solid #dfdfdf; padding:12px 0px;}
.org .flex .item .txt li:last-child {border-bottom:0;}


.org-chart ul li span:hover {
  background: #f1f1f1;
  color: #57606c;
  text-decoration: none;
  box-shadow: none;
  transition: 0.5s 
}
.org-chart {
display: block;
clear: both;
margin-bottom: 30px;
position: relative  
}
/**  * For IE 6/7 only */ 
.org-chart.cf:before, .org-chart.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.org-chart.cf:after {
clear: both 
}
.org-chart.cf {
zoom: 1 
}
.org-chart ul {
padding: 0;
margin: 0;
list-style: none 
}    
.org-chart ul li {
position: relative 
}  
.org-chart .board {
width: 100%;
margin: 0 auto;
display: block;
position: relative 
}
  
/* riga centrale */     
.org-chart .board:before {
content: "";
display: block;
position: absolute;
height: 180px;
width: 0px;
border-left: 1px dashed #c1c1c1;
margin-left: 50%;
}
  
/* stile del box */    
.org-chart ul li span {
  text-decoration: none;
  -webkit-transition: all linear .1s;
  -moz-transition: all linear .1s;
  transition: all linear .1s;
  display: block;
  margin: 1%;
  margin-top:0;
  padding:1.3rem 0.2rem;
  text-align: center;
  background: #fff;
  border: 1px solid #dbdbdb;
  word-break: break-word;
  margin: 0px 15px;
  font-size: 16px;
  color: #747474;
}   
/* stile del box in evidenza */    
.org-chart .highlight {
  background: #6fb2ff;
  color: #fff;
  font-weight: 600;
}
  
/* Righe e definizione altezze */
.org-chart ul.columnOne,
.org-chart ul.columnTwo,
.org-chart ul.columnThree{
position: relative;
width: 100%;
display: block;
clear: both 
}  
.org-chart ul.columnOne.director,
.org-chart ul.columnOne.subdirector {
  height: 90px
}
.org-chart ul.columnOne {
  height:60px
}
.org-chart ul.columnTwo {
  height: 160px
} 
.org-chart ul.columnThree {
  height: 80px
} 
  
/* Riga columnOne */    
.org-chart ul.columnOne li {
  width: 100%;
  max-width: 320px;
  margin: 0px auto 
}

/* Riga subdirector */    
.org-chart ul.columnOne.subdirector li {
  width: 100%;
  max-width: 320px;
  float:right;
  margin-right: 5px
}
.org-chart ul.columnOne.subdirector:before {
  content: "";
  display: block;
  width: 40%;
  height: 25px;
  border-top: 4px solid #2F88EF;
  border-right: 4px solid #2F88EF;
  border-left: 0;
  margin-top: 0px;
  margin-left: 50%
}
 
/* Riga columnTwo */   
.org-chart ul.columnTwo li {
width: 30%;
float: right;
margin: 0px 4px;
flex-basis: 100%
}
.org-chart ul.columnTwo:before {
content: "";
display: block;
position: relative;
width: 60%;
height: 10px;
border-top: 2px solid blue;
margin: 0 auto;
top: 40px
}

/* Riga columnThree */    
.org-chart ul.columnThree {
  width: 100%;
  display: flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-flow: row wrap;
  justify-content: space-between;
  clear: both   
} 
  
.org-chart ul.columnTwo li {
max-width: 320px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0
}     
.org-chart ul.columnThree li {
  max-width: 320px;
  margin: 0px 4px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 30%
}
.org-chart ul.departments li.department {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0 
}  
.org-chart ul.columnThree:before {
  content: "";
  display: block;
  position: relative;
  width: 80%;
  height: 10px;
  border-top: 1px dashed #c1c1c1;
  border-left: 0;
  border-right: 0;
  margin: 0 auto;
  top: 45px;
  flex-basis: 100%;
  margin-left: 10%;
  margin-right: 10%
} 
  
/* Riga departments */
.org-chart ul.departments {
  width: 100%;
  display: flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-flow: row wrap;
  justify-content: space-between;
  clear: both
}  
.org-chart ul.departments:before {
  content: "";
  display: block;
  width: 85%;
  height: 25px;
  border-top: 1px dashed #c1c1c1;
  margin: 0 auto;
  margin-top: 30px;
  flex-basis: 100%;
  margin-left: 12.5%;
  margin-right: 12.5%;
}    
.org-chart ul.departments .department:after {
  content: "";
  position: absolute;
  display: block;
  width: 10px;
  height: 25px;
  border-left: 1px dashed #c1c1c1;
  left: 50%;
  top: -25px
}
 
/* MEDIA QUERIES */     
@media all and (max-width: 991px) {
  .org-chart .board {
      margin: 0px auto;
      width: 90%
   }
  .org-chart ul li span,
  .org-chart ul.columnOne li,
  .org-chart ul.columnTwo li,
  .org-chart ul.columnThree,
  .org-chart ul.columnThree li,
  .org-chart ul.departments, 
  .org-chart ul.departments li, 
  .org-chart ul.departments li.department  {
      float: none;
      width: auto;
      max-width: none;
      display: block;
      clear: both;
      height:auto;
      margin-bottom: 5px;
      font-size: 15px;
  }  
  .org-chart ul.columnThree li.department  {
  margin-bottom:25px
  }
  .org-chart .board:before {
      height: 500px 
  }
  .org-chart .board ul:nth-child(4) > li:before {
      content: "";
      display: block;
      position: absolute;
      height: 704px;
      width: 0px;
      border-left: 1px dashed #c1c1c1;
      top: 0px;
      left: 4px;
      z-index: 9
  }
  .org-chart ul.departments li, .org-chart ul.departments li.department {
      margin-left: 40px;
      height: 80px
   }   
  .org-chart ul.departments li.department:before {
      content: "";
      display: block;
      position: absolute;
      height: 20px;
      width: 40px;
      border-top: 1px dashed #c1c1c1;
      margin-left: -25px;
      top: 30px;
      z-index: 9
  }
  .org-chart ul.departments:before,
  .org-chart ul.columnThree:before,
  .org-chart ul.departments .department:after {
      display:none
  }
  .org-chart ul.columnOne {
    height: 90px;
  }
}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
}
@media (max-width: 768px) {	
.org .flex .item { width:50%; flex: 1 40%;}	
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}