@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);

* {
  box-sizing: border-box;
}

/* STILE DEL BODY */
   body {
   font-family: "Open Sans", sans-serif;
   margin: 0;
   font-size:110%;
   background-color: #333;
   background-repeat: no-repeat;
   background-image: linear-gradient(#000066, #336699, #000066) !important;
   }
/* CONTENITORE CENTRATO*/
   .concent {
   max-width: 90%;
   margin: auto;
   background: #333;
   padding: 10px;
   }
   
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .concent {   
    max-width: 100%;
    margin:0;
  }
}

/* HEADER/LOGO TITLE */
   .header {
   padding: 5px;
   text-align: center;
   background: #1abc9c;
   color: #fff;
   }

/* - - - - - Increase the font size of the heading - - - - - */
   .header h1 {
   font-size: 150%;
   }

/* - - - - - Style the top navigation bar - - - - - */
   .navbar {
   overflow: hidden;
   background-color: #131313;
   }

/* - - - - - Style the navigation bar links - - - - - */
   .navbar a {
   float: left;
   display: block;
   color: #6ff;
   text-align: center;
   padding: 10px;
   text-decoration: none;
   }

/* - - - - - Right-aligned link - - - - - */
   .navbar a.right {
   float: right;
   }

/* - - - - - Change color on hover - - - - - */
   .navbar a:hover {
   background-color: #999;
   color: #000;
   }

/* - - - - - Column container - - - - - */
   .row {  
   display: -ms-flexbox; /* IE10 */
   display: flex;
   -ms-flex-wrap: wrap; /* IE10 */
   flex-wrap: wrap;
   }

/* - - - - - Create two unequal columns that sits next to each other - - - - - */
/* - - - - - Sidebar/left column - - - - - */
   .side {flex: 14%;
   background-color: #006;
   padding: 10px;
   }
   .logoattibio{display:block;
   margin:0 auto;
   }

/* - - - - - IL MENU PRINCIPALE - - - - - */
   #main-menu{list-style-type: none;
   }
   #main-menu li {margin-top:2px;
   }

/* - - - - - COLONNA PRINCIPALE - - - - - */
   .main {flex: 82%;
   background-color: #003;
   padding: 20px;
   color: #f5f5f5;
   }

/* - - - - - INDICE DEGLI ARGOMENTI DELLA PAGINA - - - - - */
   #boxmenu{margin:10px;
   text-align : left;
   border: 1px solid #ccc;
   padding : 2px 10px;
   color : #fff;
   background: #333;
   width: 45%;
  }
  
  /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  #boxmenu {   
    width: 100%;
    margin:0;
  }
}

/* - - - - - CAPITOLI - - - - - */
   div.titolo{padding : 10px;
   margin : 5px 0;
   text-align : left;
   border : 1px solid #999;
   border-radius:10px;
   color:#333;
   font-weight:normal;
   }

   h1{font-weight:normal;
   color:#f5f5f5;
   }

   h1.titolo{font-family: serif;
   color:#f5f5f5;
   font-weight:normal;
   border-bottom: 1px solid #999;
   }

   div.indice-pagine{font-family:sans-serif;
   text-align:right;
   padding-right:2%;
   }

   h2{padding : 3px;
   margin : 1px 0;
   text-align : left;
   border-bottom : 1px solid #999;
   font-size : 150%;
   font-family: serif;
   color:#f5f5f5;
   }

   h2.title{margin : 1px 0;
   text-align : center;
   font-family: sans-serif;
   font-weight:normal;
   color:#f5f5f5;
   border-bottom : none;
   font-size:95%;
   }

   h3{text-align : left;
   padding : 2px;
   margin : 2px;
   border-bottom : 1px solid #999;
   font-size : 140%;   
   font-family: serif;
   color:#f5f5f5;
   }

   h4{color:#f5f5f5;
   border-bottom : 1px solid #999;
   font-family: serif;;
   font-size : 130%;
   }
   
   h5{color:#f5f5f5;
   font-family: serif;
   font-size : 120%;
   }

/* - - - - - PARAGRAFI DELLE PAGINE - - - - - */
   p{text-align : justify;
   }

   p:first-letter{margin-left : 1%;
   font-weight : bold;
   font-size:150%;
   }

/* - - - - - COLONNE INTERNE ALL'ARTICOLO - - - - - */
   .griglia{width:100%;
   }

   .columnl {
   float: left;
   width: 59%;
   border:1px solid #009;
   border-radius:10px;
   padding:14px!important;
   margin-right:10px;
    }

   .columnr {
   float: left;
   width: 39%;
   border:1px solid #009;
   border-radius:10px;
   padding:14px!important;
   }

   .griglia:after {
   content: "";
   display: table;
   clear: both;
   }
   
/* - - - - - LISTE E LISTE DI DEFINIZIONE - - - - - */
   ul{text-align:justify;
   color:#f5f5f5;
   }
   
   ol{text-align:justify;
   color:#f5f5f5;
   }

   dl{margin : 3px;
   padding : 3px;
   background : transparent;
   color : #f5f5f5;
   text-align:justify;
   }

   dt{color : #f5f5f5;
   margin-top : 15px;
   font-size : 110%;
   font-weight : bold;
   padding:5px 10px;
   }

   dd{font-size : 100%;
   color : #f5f5f5;
   }

/* - - - - - FORMATTAZIONI VARIE - - - - - */
   blockquote{color:#fcf;
   font-style: italic;
   text-align: justify;
   }

   .citazione{margin : 0;
   background: #369;
   color: #fff;
   border : 1px solid #ccc;
   padding : 10px;
   font-family : sans-serif;
   }

   #link{margin:10px 0;
   padding:1%;
   background: #131313;
   border:1px solid #9cc;
   }

/* - - - - - LE IMMAGINI NEL SITO - - - - - */
   img{max-width:100%;
   height:auto;
   border-radius:15px;
   }

   .arrotondate{border: 1px solid #999;
   border-radius: 10px 10px 10px;
   }

   .centrato{text-align : center;
   }

/* - - - - - EVIDENZIAZIONI - - - - - */
   .evidenziatored{color:#ff9980;
   font-weight:bold;
   font-size:110%;
   }
   .evidenziatogreen{color:#0f9;
   font-weight:bold;
   font-size:110%;
   }
   .evidenziatoblu{color:#0cf;
   font-weight:bold;
   font-size:110%;
   }
   .evidenziatoviolet{color:#e6b3ff;
   font-weight:bold;
   font-size:110%;
   }

   hr{color:#cceeff;}

/* - - - - - PIÈ DI PAGINA - - - - - */
   .footer {
   padding: 5px;
   text-align: center;
   background: #131313;
   }

   .strumenti{border:1px solid #ccc;
   background-color: #131313;
   margin : 1%;
   padding : 5px;
   color : #f5f5f5;
   text-align : left;
   }
   
/* - - - - - PULSANTI DI AVANZAMENTO - - - - - */
   .previous:hover,
   .next:hover {
    background-color: #ddd;
    color: #000;
    text-decoration:none;
    border:1px solid #fff;
    }

   .previous {
    background-color: #000;
    padding: 8px 16px;
    font-size:120%;
    float:left;
    border:1px dashed #6f6;
    }

   .next {
    background-color: #000;
    padding: 8px 16px;
    font-size:120%;
    border:1px dashed #6f6;
    }
   
/* - - - - - I LINKS - - - - - */
   a {color: #6ff;
   text-decoration:underline;
   }

   a:link {color: #6ff;
   text-decoration:underline;
   }
   
   a:visited {color: #6ff;
   text-decoration:underline;
   }
   
   a:hover {color: #fc0;
   text-decoration:none;
   }

/* - - - - - TABELLE - - - - - */
   table{font-size : 95% ;
   width : 100%;
   margin: 1% 0;
   }

   th{font-size : 100%;
   background : #366;
   color :#fff;
   border : 1px solid #999;
   padding:10px;
   }

   tr{width : 100%;
   }

   td{color : #fff;
   border : 1px solid #999;
   vertical-align: top;
   padding:10px;
   text-align:justify;
   }

/* - - - - - AVVISO IMPORTANTE - - - - - */
   #manifesto{border: 1px solid #fff;
   background: #900;
   padding: 10px;
   margin: 10px 0;
   }
   #manifesto:before{content:'Attenzione!';
   color:#fff;
   margin-right:20px;
   font-weight:bold;
   }

/* - - - - - ALLARMI - - - - - */
   .alert {
   padding: 20px;
   background-color: #f44336;
   color: white;
   opacity: 1;
   transition: opacity 0.6s;
   margin-bottom: 15px;
   }

   .alert.success {background-color: #4CAF50;}
   .alert.info {background-color: #2196F3;}
   .alert.warning {background-color: #ff9800;
   color:#000;}

/* - - - - - NOTA IMPORTANTE - - - - - */
   .nota{width:75%;
   border-left:10px solid #f60;
   border-top:1px solid #f60;
   border-right:1px solid #f60;
   border-bottom:1px solid #f60;
   padding: 20px;
   background:#666;
   color:#fff;
   margin:5px auto;
   }
   .nota:before{content:'Nota :';
   color:#fc0;
   margin-right:20px;
   font-weight:bold;
   font-size:120%;
   font-family:sans-serif;
   }
   
   /* - - - - - SOTTOLINEATURA - - - - - */
   .underline{
   text-decoration-line: underline;
   text-decoration-color: #fff;  
   }
   
/* - - - - - BOLLINO MODULO - - - - - */
   .primo{ 
   width:auto;
   margin:20px;
   border:2px dashed #3f0;
   border-radius:10px;
   background:#000;
   padding:20px;
   float:right;
   font-weight:bold;
   text-align:center;
   color:#3f0;
   }

   .secondo{ width:auto;
   margin:20px;
   border:2px dashed #ff6;
   border-radius:10px;
   background:#000;
   padding:20px;
   float:right;
   font-weight:bold;
   text-align:center;
   color:#ff6;
   }

   .terzo{ width:auto;
   margin:20px;
   border:2px dashed #fc6;
   border-radius:10px;
   background:#000;
   padding:20px;
   float:right;
   font-weight:bold;
   text-align:center;
   color:#fc6;
   }

   .quarto{ width:auto;
   margin:20px;
   border:2px dashed #f66;
   border-radius:10px;
   background:#000;
   padding:20px;
   float:right;
   font-weight:bold;
   text-align:center;
   color:#f66;
   }

   .quinto{ width:auto;
   margin:20px;
   border:2px dashed #f0f;
   background-color: #000;
   padding:20px;
   float:right;
   font-weight:bold;
   text-align:center;
   color:#f0f;
   }
   
   /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .primo, .secondo, .terzo, .quarto, .quinto {   
  display:none;
  }
}

/* - - - - - PULSANTE ISCRIZIONE - - - - - */  
   .iscrizione{width:60%;
   margin:0 auto;
   padding:5px;
   border:2px solid #6ff;
   background:#000;
   }
   
/* - - - - - ANATOMIA - - - - - */
.index-anatomico{
	font-size:130%;
   background:#000;
   border:2px dotted #fff;
   border-radius:5px;
   width:40%;
   margin:0 auto;
   text-align: center;
   padding:15px;
   }
   
/* - - - - -BOTTONI COLLASSABILI- - - - - */
.collapsible {
  background-color: transparent;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: 3px solid #009;
  border-radius:10px;
  text-align: left;
  outline: none;
  font-size: 130%;
  margin-bottom:5px;
}

.active, .collapsible:hover {
  background-color: #009;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #000;
}
   
/* The close button */
   .closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
   }

   .closebtn:hover {
  color: black;
   }
   
   nav{border:1px solid #999;
   background:#f5f5f5;
   padding:5px;
   margin:10px 0;}

/* When moving the mouse over the close button */
   .closebtn:hover {
    color: black;
   }
   
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  .row {   
    flex-direction: column;
  }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar a {
    float: none;
    width: 100%;
  }
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
} 
   
/* Use a media query to add a breakpoint at 900px: */
@media screen and (max-width: 800px) {	
  .titolo{border:none!important;
  }
  .columnl, .columnr {
  	padding: 5px!important;
   border:none!important;
   background-color: transparent;
   width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  div.navbar {display:none;
  }
  .bookl, .bookr {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  div.sentiero{font-size:100%;
  }
  #main-menu{display:none;
  }
  .chiave{display: none;
  }
  .footer{display: none;
  }
  .social{display: none;
  }
  .consulta{display: none;
  }
  div.indice-pagine{text-align:center;
  }

  
  ul{width: 100%;}