@charset "utf-8";
/* CSS Document */

       /* SFONDI */  
.sfondi {		
	margin-left:0px;
	margin-right:0px;
	margin-top:38px;
}

.sfondi .container-fluid {
	background:url(../images/h-bod-lay-sfondoblucont.jpg);
}

@media (max-width: 767px) {
	.sfondi {
		margin-top:8px; 
    }
}

   /* SFONDI COLONNA SINISTRA */ 
.navbar {
    border: none;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #3366FF;
}

.navbar-default .navbar-toggle .icon-bar1 {
    color: #3366FF;    
	font-size: 1.4em;
	float:left;
	margin-top:-7px;
	margin-left:28px;	
}

     /* bottone menu */
.navbar-default .navbar-toggle {
  border: 1px solid #3366FF;
}

.navbar-toggle, .navbar-header {
  float:left;
  width: 100px;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
}

.navbar-default .navbar-toggle:hover .icon-bar {
    background-color: #D45FFF;
}

.navbar-default .navbar-toggle:hover .icon-bar1 {
    color: #D45FFF;
}

.navbar-default .navbar-toggle:hover {
    border: 1px solid #D45FFF;
}

     /* Off Canvas: la sidebar ora scorre SOPRA il contenuto (overlay a
        tutto schermo) invece di spingerlo lateralmente */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
  }

  .sidebar-offcanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    z-index: 1050;
    background-color: #B3C9FF; /* colore di fondo per coprire davvero il contenuto sottostante: cambialo se preferisci un altro colore */
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
    -webkit-transition: -webkit-transform .25s ease-out;
            transition: transform .25s ease-out;
  }

  .row-offcanvas-left.active .sidebar-offcanvas {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }

  /* Da chiusa il bottone Menù resta esattamente come è sempre stato */
  .navbar-header,
  .navbar-toggle {
    position: relative;
    z-index: 1060;
  }

  /* Da aperta, invece di restare sovrapposto al primo bottone della
     colonna, il Menù si aggancia in cima alla colonna e occupa la sua
     riga per intero: "Bottoni" e tutti gli altri scendono sotto di lui,
     senza sovrapposizioni. Richiede un browser che supporta :has()
     (Firefox, Chrome, Edge, Safari recenti); su browser molto vecchi il
     bottone semplicemente non si sposta, restando comunque funzionante.
     Se nel tuo browser resta un filo di spazio vuoto o una minima
     sovrapposizione, aggiusta di qualche pixel i due valori "64px" qui
     sotto (devono restare uguali fra loro). */
  nav.navbar:has(.row-offcanvas-left.active) .navbar-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 64px;
    z-index: 1060;
    background-color: #B3C9FF;
    //border-bottom: 1px solid #3366FF;
  }

  /* da aperta il bottone risultava leggermente tagliato a sinistra
     (essendo agganciato a left:0), questo margine lo stacca dal bordo */
  nav.navbar:has(.row-offcanvas-left.active) .navbar-toggle {
    margin-left: 24px;
  }

  nav.navbar:has(.row-offcanvas-left.active) .sidebar-offcanvas {
    padding-top: 64px;
  }
}

.sfondi .bottoni ul {
	padding:0;
}

.sfondi .bottoni li ul {
	left:0px;
	top:0;
	visibility:hidden;
	position:absolute;
} 

.sfondi .bottoni li {
	position:relative;
	display:block;
	height:31px;
	width:180%;
	padding:0;
	margin-left:-15px;
	margin-bottom:4px;
	border:0;
	list-style:none;	
	background:url(../images/bottone-sito.png) no-repeat;	
	float:left;		
	border-radius: 3px;
}

.sfondi .bottoni a {
	display:block;
	font-size:0.8em;
	font-weight:700;
	text-decoration:none;
	padding:8px 0px 0 30px;
	color:#0000A0; 	
	float:left;
}

.sfondi .bottoni li>ul>li {
	width:80%;
	background:url(../images/bottone-sito-piccolo.png) no-repeat;
	margin-bottom:0px;
	margin-left:50px;
}

.sfondi .bottoni li:hover>ul {
	visibility:visible;
	top:100%;
}

.sfondi .bottoni ul>li + li {
	border-top:0;
}

.sfondi .bottoni .autunno, .sfondi .bottoni .estate, .sfondi .bottoni .inverno {
	z-index:10000;
}

.sfondi .bottoni li>ul>li>a {
	margin-top:1px;
	padding:8px 0px 0 30px;
	color:#0000A0; 
	font-weight:700;
}

.sfondi .bottoni li:hover{
	background:url(../images/lucidoazzurobottone.gif) no-repeat;
	background-position:0px -8px;
}

.sfondi .bottoni li>ul> li:hover {
	background:url(../images/lucidoazzurro.gif) no-repeat;
	background-position:0px;
}

.sfondi .bottoni li:hover>a{
	color:#D45FFF; 
}

     /* siti web */
.sfondi .siti-web {
	float:left;
	width:180%;	
} 

.sfondi .convertire {
	margin-left: 2px;	
}
 
.sfondi .copelli, .sfondi .pub-dom, .sfondi .wikipedia, .sfondi .tuttoweb  {
	margin-top: 5px;
	border:#3366FF double 4px;		
} 

@media screen and (min-width: 768px) and (max-width: 1210px) {
    .sfondi .bottoni .animati-tras a, .sfondi .bottoni .cornici a {
	  font-size:0.7em;
    }
}

@media screen and (min-width: 768px) and (max-width: 1180px) {
    .sfondi .bottoni .divisori-or a {
	  font-size:0.8em;
    }
}

@media screen and (min-width: 768px) and (max-width: 1117px) {
     .sfondi .bottoni .paesaggi a {
	  font-size:0.8em;
    }
}

@media screen and (min-width: 768px) and (max-width: 1098px) {
    .sfondi .bottoni .cornici a {
	   font-size:0.7em;
    }
}

@media screen and (min-width: 768px) and (max-width: 1098px) {
     .sfondi .bottoni .divisori-an a{
	   font-size:0.8em;
    }
}

@media screen and (min-width: 768px) and (max-width: 1070px) {
    .sfondi .bottoni .citta a {
	   font-size:0.8em;
    }
}

@media screen and (min-width: 768px) and (max-width: 1070px) {
    .sfondi .bottoni .divisori-or a {
	   font-size:0.7em;
    }
}

@media screen and (min-width: 768px) and (max-width: 1060px) {
    .sfondi .bottoni .animati-tras a, .sfondi .bottoni .animali a {
	   font-size:0.8em;
	   padding:0px 10px 0px 30px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1017px) {
    .sfondi .bottoni .cornici a {
	    padding:8px 10px 0px 30px;
		font-size:0.6em;
    
}

@media screen and (min-width: 768px) and (max-width: 990px) {
    .sfondi .bottoni .divisori-an a, .sfondi .bottoni .paesaggi a {
	    padding:10px 5px 0px 30px;
		font-size:0.7em;
    }
}

@media screen and (min-width: 768px) and (max-width: 983px) {
    .sfondi .bottoni .cornici a {
	    padding:5px 10px 0px 30px;
		    
    }
}
	
@media (max-width: 978px) {	
	.sfondi .bottoni .animati-tras a {
	    padding:2px 10px 0px 30px;
    }
}

@media screen and (min-width: 768px) and (max-width: 965px) {
    .sfondi .bottoni .divisori-or a {
	    padding:0px 10px 0px 30px;
		font-size:0.7em;
    }
}

@media screen and (min-width: 768px) and (max-width: 945px) {
    .sfondi .bottoni .citta a {
	    padding:0px 10px 0px 30px;
	}
}

@media screen and (min-width: 768px) and (max-width: 945px) {
    .sfondi .bottoni .paesaggi a {
	    padding:2px 10px 0px 30px;
		font-size:0.7em;
	}
}

@media screen and (min-width: 768px) and (max-width: 938px) {
    .sfondi .bottoni .decorazioni a {
	    padding:7px 10px 0px 30px;
		font-size:0.8em;
    }
}

@media screen and (min-width: 768px) and (max-width: 938px) {
    .sfondi .bottoni .citta a {
	    padding:1px 10px 0px 30px;
		font-size:0.8em;
    }
}

@media screen and (min-width: 768px) and (max-width: 938px) {
    .sfondi .bottoni .divisori-an a {
	    padding:1px 10px 0px 30px;
		font-size:0.8em;
    }
}

@media screen and (min-width: 768px) and (max-width: 912px) {
    .sfondi .bottoni .animati a {
	    padding:0px 10px 0px 30px;
    }
}

@media screen and (min-width: 768px) and (max-width: 910px) {
    .sfondi .bottoni .gif a {
	    padding:10px 10px 0px 30px;
		font-size:0.8em;
    }
}

@media screen and (min-width: 768px) and (max-width: 890px) {
    .sfondi .bottoni .decorazioni a, .sfondi .bottoni .wallpapers a {
	    padding:8px 10px 0px 30px;
		font-size:0.8em;
    }
}

@media screen and (min-width: 768px) and (max-width: 865px) {
    .sfondi .bottoni .gif a {
		font-size:0.7em;
    }
}

@media screen and (min-width: 768px) and (max-width: 840px) {
    .sfondi .bottoni .tre a {
		font-size:0.8em;
    }
}
@media screen and (min-width: 768px) and (max-width: 840px) {
    .sfondi .decorazioni a {
		font-size:0.7em;
    }
}
@media screen and (min-width: 768px) and (max-width: 834px) {
    .sfondi .bottoni .animali a {
	   font-size:0.7em;
	   padding:0px 10px 0px 30px;
    }
}

@media screen and (min-width: 768px) and (max-width: 830px) {
    .sfondi .bottoni .tre a {
		font-size:0.9em;
    }
}

@media screen and (min-width: 768px) and (max-width: 823px) {
    .sfondi .bottoni .cornici a, .sfondi .bottoni .gif a {
	    padding:4px 10px 0px 30px;
    }
}

@media screen and (min-width: 768px) and (max-width: 820px) {
    .sfondi .bottoni .gif a {
	    padding:2px 10px 0px 30px;
    }
}

@media screen and (min-width: 768px) and (max-width: 820px) {
    .sfondi .salagiochi a {
		font-size:0.9em;
    }
}
@media screen and (min-width: 768px) and (max-width: 813px) {
    .sfondi .cornici a {
		font-size:0.4em;
    }
}
@media screen and (min-width: 768px) and (max-width: 800px) {
    .sfondi .bottoni .tre a {
		font-size:0.8em;
    }
}

@media screen and (min-width: 768px) and (max-width: 800px) {
    .sfondi .bottoni .decorazioni a, .sfondi .bottoni .animati-tras a, .sfondi .bottoni .wallpapers a  {
		font-size:0.7em;
    }
}

@media screen and (min-width: 768px) and (max-width: 794px) {
    .sfondi .bottoni .animali a {
	   font-size:0.6em;
	   padding:5px 10px 0px 30px;
    }
}
/*
  La sidebar-offcanvas ora è un overlay a piena larghezza su tutta la
  fascia sotto i 767px (vedi il blocco "Off Canvas" più sopra), quindi non
  serve più allargare progressivamente bottoni e loghi per compensare una
  sidebar che si restringeva mano a mano che lo schermo si rimpiccioliva:
  basta un'unica regola per tutta questa fascia, e il testo resta leggibile
  senza bisogno di rimpicciolirlo.
*/
@media (max-width: 767px) {
    .sfondi .bottoni li {
        width: 100%;
        margin-left: 0;
    }

    .sfondi .siti-web {
        width: 100%;
    }
}