@font-face {
    font-family: 'cooperhewitt-bold';
    src: 
        url('font/CooperHewitt-Bold.eot'),
        url('font/CooperHewitt-Bold.woff') format('woff'),        
        url('font/CooperHewitt-Bold.svg') format('svg'); 
}
@font-face {
    font-family: 'cooperhewitt-bolditalic';
    src:         
        url('font/CooperHewitt-BoldItalic.eot'),
        url('font/CooperHewitt-BoldItalic.woff') format('woff'),        
        url('font/CooperHewitt-BoldItalic.svg') format('svg');   
}
@font-face {
    font-family: 'cooperhewitt-book';
    src:         
        url('font/CooperHewitt-Book.eot'),
        url('font/CooperHewitt-Book.woff') format('woff'),        
        url('font/CooperHewitt-Book.svg') format('svg');
}
@font-face {
    font-family: 'cooperhewitt-bookitalic';
    src:         
        url('font/CooperHewitt-BookItalic.eot'),
        url('font/CooperHewitt-BookItalic.woff') format('woff'),        
        url('font/CooperHewitt-BookItalic.svg') format('svg');
}
@font-face {
    font-family: 'cooperhewitt-medium';
    src:         
        url('font/CooperHewitt-Medium.eot'),
        url('font/CooperHewitt-Medium.woff') format('woff'),        
        url('font/CooperHewitt-Medium.svg') format('svg');
}
@font-face {
    font-family: 'cooperhewitt-semibold';
    src:         
        url('font/CooperHewitt-Semibold.eot'),
        url('font/CooperHewitt-Semibold.woff') format('woff'),        
        url('font/CooperHewitt-Semibold.svg') format('svg');
}


/*** General ***/
body {    
    font-family: cooperhewitt-book, sans-serif;
    color: #1a1a1a;
    font-size: 19px;
    line-height:30px;
}

b{font-family: cooperhewitt-semibold, sans-serif;}
i{font-family: cooperhewitt-bookitalic, sans-serif;}
.azzurro{color:#186788;}
.mattone{color:#8d1e18;}

/*la pagina va sotto il menu*/
#wrapper{
    position:relative;
    top:-85px}

/*MENU TOP*/
#menuTop {
    position:relative;
    z-index:100;
    padding-left:0;
    
}
button.btn{    
    width:85px;
    height:85px;
    border:0 solid #ffffff;
    border-radius: 0;
    font-family:cooperhewitt-bold, sans-serif;
    font-size:12px;
    letter-spacing:1px; 
    color:#000000;
    border-right:2px solid #1a1a1a;
    /*background-color:#dddd00;*/
}
.btn-default:hover, .btn-default:focus, .btn-default:hover,    
.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, 
.btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, 
.open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
    color:#000000;
    background-color: #ffffff;
    border-right:2px solid #1a1a1a;
    -webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0);
    box-shadow: inset 0 0px 0px rgba(0,0,0,0);
}
.open>button {background-color:white}
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {background-color:white}
.dropdown-menu {
    left:86px;   
    height:85px;
    padding: 0 10px;
    margin: 0px;
    font-family:cooperhewitt-bold, sans-serif;
    font-size:12px;
    letter-spacing:1px;
    color:#6e7d85;
    border: 0 solid #ccc;
    border: 0 solid rgba(0,0,0,.15);
    border-radius: 0;
    -webkit-box-shadow: 0 0 0 rgba(0,0,0,0);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    /*background-color:#dddd00;*/
}
.dropdown-menu > li{
    display: inline-block;
    float:left;   
    height:45px;
    margin-top:20px;         
}
.dropdown-menu > li a:link,a:visited,a:hover,a:active{
    background-color:#ffffff;    
    font-family:cooperhewitt-semibold, sans-serif;
}
.dropdown-menu>.active>a, .dropdown-menu>.active>a:focus, .dropdown-menu>.active>a:hover {
    color: #bd1c17;
    text-decoration: none;
    background-color:#ffffff; 
    outline: 0;
}
.open>.dropdown-menu {
    display: inline-flex;
}
.btn-group {
    display: inline;
}
.btn-group.open .dropdown-toggle {
    -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,0);
    box-shadow: inset 0 0 0 rgba(0,0,0,0);
}
/* //MENU TOP*/

.titoloAncora{
    height: 111px;
    vertical-align:bottom;
    text-align:center;
    /*background-color:#ddd222;  */ 
}
.titoloAncora h3.titolo{ 
    width:80%;
    position:absolute;    
    bottom:-10px;
    left:10%;    
    font-family: cooperhewitt-bold, sans-serif;
    font-size: 18px;
    line-height:20px;
    letter-spacing:2px;
    color:#bd1c17;   
    /*background-color:#dddddd;*/    
}
.titoloPipe{    
    width:2px;
    height:50px;
    background-color:#bd1c17;
}
h3.mattone{
    font-family:cooperhewitt-semibold, sans-serif;
    font-size: 19px;
    line-height:24px;
    letter-spacing:1px;    
    color:#ca4e36;
    text-align:left;    
}
.testoFoto{
    font-family: cooperhewitt-book, sans-serif;
    font-size: 22px;
    line-height:30px;
    color:#ffffff;
}
div.elenco::before {
    content:'\2015'; /*'\2014'*/
    font-weight:bold;
    padding-right:5px;
}

div.about::before {
    content:'\02C3';
    font-weight:bold;
    padding-right:5px;
    text-decoration: none;
}
    

/* box foto con testo in sezioni 1, 2, 3 */
#pag1-box1, #pag1-box2,
#pag2-box1, #pag2-box2, #pag2-box3,
#pag3-box1, #pag3-box2, #pag3-box3, #pag3-box4{
    position:absolute;
}
#pag1-box1{
    width:62%;    
    top:9.5%;
    left:11%;
}
#pag1-box2{
    width:48%;    
    top:31%;
    left:38%;
}
#pag2-box1{
    width:32%;    
    top:40%;
    left:10%;
}
#pag2-box2{
    width:40%;    
    top:27%;
    left:42%;
}
#pag2-box3{
    width:43%;    
    top:31%;
    left:15%;
}
#pag3-box1{
    width:51%;    
    top:12%;
    left:14%;
}
#pag3-box2{
    width:46%;    
    top:20%;
    left:34%;
}
#pag3-box3{
    width:46%;    
    top:38%;
    left:39%;
}
#pag3-box4{
    width:46%;    
    top:46%;
    left:24%;
}
/* // box foto con testo  */


/*menu 4 punti visibile in tutte le pagine*/
#menuVisibile{     
    padding:0;
    margin:0;
    color:#1a1a1a;
    width:100%;
}

#menuVisibile a div.item, 
#menuVisibile a:link div.item, 
#menuVisibile a:visited div.item {
    padding:0;
    width:25%; 
    padding:0 0 10px 0;
    min-height:117px;
}
#menuVisibile a:hover div.item, 
#menuVisibile a:visited:hover div.item, 
#menuVisibile a:active div.item {
    background-color:#d2d9dd;
}
#menuVisibile a.active div.item {
    background-color:#d2d9dd;
}
#menuVisibile a div.item{
    border-left:2px solid #373737;  
}
#menuVisibile a div.itemLast{
    border-right:2px solid #373737;
}
#menuVisibile div.item h3{
    text-align:center;
    margin:0px;
    padding:10px 0 0 0;
    font-family:cooperhewitt-medium, sans-serif;
    font-size:43px; 
    color:#1a1a1a;       
}
#menuVisibile div.item p{
    text-align:left;
    margin:0px;
    padding:10px 0 0 20%;
    font-family:cooperhewitt-bold, sans-serif;
    font-size:11px;
    line-height:13px;
    letter-spacing:1px;    
}
.separatore{   
    height:30px;
}
.separatoreBig{   
    height:80px;
}
/* //menu 4 punti visibile nelle pagine*/

/*accordion - sezione 1*/
h4.panel-title a.mattone:link, a.mattone:visited, a.mattone:active{
    color:#ca4e36;
    font-size: 19px;
    text-decoration: none;
}
h4.panel-title a.mattone::before {
    content:'\2335';
    font-weight:bold;
    padding-right:10px;
    text-decoration: none;
}

 #accordion .panel-heading{
    margin:0px 0 10px 0;
    padding:0px;
    background-color:#ffffff;
    border: 0 solid transparent;
}
.panel, .collapse{      
    border: 0 solid transparent;
}
.panel-group .panel-heading+.panel-collapse>.list-group, .panel-group .panel-heading+.panel-collapse>.panel-body {
    border-top: 0 solid transparent;
}
.panel-default>.panel-heading {
    color: #333;
    background-color: #ffffff;
    border-color: #fff;
}
.panel-body{
    margin:0px 0 20px 0;
    padding:0px;        
}
/* //accordion*/


/*menu su sfondo immagine in sezioni 1, 2, 3, 4*/
.menuPagina{  
    position:absolute;
    top:5%;
    left:34.5%;
    padding:0px 0px 20px 0px;
    margin: 0 auto;
    /*background-color:#ffffff;
    opacity:0.6;
    border:1px solid #55cc00;*/   
}
.menuPagina div{
    text-align:center;
}
.menuPagina div h3{
    text-align:center;
    margin:70px 0 0 0;
    padding:0px;    
    font-family:cooperhewitt-medium, sans-serif;
    font-size:77px; 
    color:#1a1a1a;
    color:#000000;
}
.menuPagina div p{  
    padding:10px 0 0 0;
    font-family:cooperhewitt-bold, sans-serif;
    font-size:20px;
    line-height:22px;
    letter-spacing:1px;
    text-align:left;
    width:45%;
    margin: auto;
    /*background-color:#333fff;*/
}
.menuPagina div p.sezione3{  
    width:30%;
}
.menuPagina div p a.sottomenu,a.sottomenu:link,a.sottomenu:visited.a.sottomenu:hover{   
    font-family:cooperhewitt-bold, sans-serif;
    font-size:15px;
    line-height:19px;
    letter-spacing:2px;
    color:#1a1a1a;
    color:#000000;
    background-color:transparent;
}
.sottomenuPipe{
    background-color:#1a1a1a;
    width:2px;
    height:40px;
    margin:20px 0px 10px 0px;
}
#sezione1{    
    width:33.2%;
    left:34.7%;
}
#sezione2{    
    width:30.8%;
    left:34.7%;
}
#sezione3{
    width:42.5%; 
    left:31.2%;
}
#sezione4{    
    width:30.8%;
    left:34.7%;
}
/* //menu su sfondo immagine in sezioni 1, 2, 3 4*/

a, a:link, a:visited, a:hover{
    /*font-family:cooperhewitt-semibold, sans-serif;*/    
    font-family:cooperhewitt-medium, sans-serif;    
    text-decoration:none;
}
a:hover{
    text-decoration:underline;
}
a.linkInterno, a.linkInterno:link, a.linkInterno:visited, a.linkInterno:hover,a.linkInterno:active{
    color:#ca4e36;  
}
a.linkEsterno, a.linkEsterno:link, a.linkEsterno:visited, a.linkEsterno:hover,a.linkEsterno:active{     
    color:#186788;   
}

a.about, a.about:link, a.about:visited, a.about:hover,a.about:active{
    text-decoration: none;  
}
/*
a.about::before {
    content:'\02C3';
    font-weight:bold;
    padding-right:10px;
}*/

/*visualizzazione su vari dispositivi*/
@media (min-width: 1024px) {
    /* Structure > 1200px */
    #wrapper{
        width: 1024px;
        margin: 0 auto;} 
    #menuTop {        
        width:1024px;
    }
}
@media (min-width: 768px) and (max-width: 980px) {
    /* Structure 768 to 1000 */
    #wrapper{
        width: 748px;
        margin: 0 auto;
        /*background-color:yellow;*/}
    #menuTop {        
        width:748px;}    
    .menuPagina div h3{
        margin:30px 0 0 0;       
        font-size:45px; }    
}
@media (min-width: 480px) and (max-width: 767px) {
    /* Structure  < 767 */    
    #wrapper{
        width: 100%;
        margin: 0 auto;
        /*background-color:green;*/}
    #menuTop {        
        width:100%;}    
}

/*ridimensione il font dei fumetti sopra le immagini per risoluzioni inferiori a 480*/
@media (max-width: 480px) {
     .testoFoto{
        font-size: 15px;
        line-height:19px;}     
}
/*riposiziono il testo nei fumetti sopra le immagini per risoluzioni inferiori a 767*/
@media (max-width: 767px) {
    #pag1-box1{
        width:55%;    
        top:5%;
        left:15%;}    
    #pag1-box2{
        width:60%;    
        top:40%;
        left:20%;}
    #pag2-box1{
        width:50%;    
        top:25%;
        left:22%;}
    #pag2-box2{
        width:70%;    
        top:40%;
        left:15%;}
    #pag2-box3{
        width:62%;    
        top:37%;
        left:16%;}
    #pag3-box1{
        width:63%;    
        top:32%;
        left:20%;}
    #pag3-box2{
        width:62%;    
        top:32%;
        left:12%;}
    #pag3-box3{
        width:62%;    
        top:40%;
        left:20%;}
    #pag3-box4{
        width:55%;    
        top:40%;
        left:22%;}
}
@media (max-width: 667px) {
    #menuVisibile a div.item, 
    #menuVisibile a:link div.item, 
    #menuVisibile a:visited div.item {
        padding:0;
        width:50%; 
        padding:0 0 10px 0;
        margin-bottom:20px;
    }
    #menuVisibileItem2{
        border-right:2px solid #373737;
    }
}
@media (max-width: 320px) {
    body{
        min-width:320px;}
    #menuVisibile div.item p{        
        font-size:10px;  
    }    
}

@media (max-width: 479px) {
    /* Structure up to 479 */
    body{
        /*min-width:480px;*/
        background:#fff;}
    #wrapper{
        width: 100%;
        margin: 0 auto;
        background-color:white;}
    #menuTop {        
        width:100%;}   
    /*.hidden-xxs {
        display: none !important;
    }
   
    #pag1-box1, #pag1-box2,
    #pag2-box1, #pag2-box2, #pag2-box3,
    #pag3-box1, #pag3-box2, #pag3-box3, #pag3-box4{
        position:relative;
        width:90%;
        top:10%;
        left:10%;        
        padding:10%;
        margin-bottom:10%;
        background-color:#819bb4;
    }*/
}

/* VERTICAL MENU */
@media (max-width: 767px) {
    .open>.dropdown-menu {
        display: block;
    }
    .dropdown-menu {
        color:#6e7d85;
        height:400px;
        font-size: 12px;
        padding-top:20px;
        left:0;
        top:85px;
    }
    .dropdown-menu > li{
        padding:10px;
        width: 200px;
        margin:0;
        height: auto;
    }    
}
/*MENU TOP PAGINA SU FOTO*/
@media (min-width: 768px) and (max-width: 980px) {
    .menuPagina div h3{
        margin:10px 0 0 0;       
        font-size:45px; 
    }
    .menuPagina div p{           
        font-size:18px;
        line-height:20px;
    } 
    .sottomenuPipe{  
        height:30px;
        margin:10px 0px 5px 0px;
    }
}
@media (max-width: 767px) {
    .menuPagina div h3{
        margin:10px 0 0 0;       
        font-size:35px; 
    }
    .menuPagina div p{           
        font-size:15px;
        line-height:17px;
    }    
    .menuPagina div p a.sottomenu,a.sottomenu:link,a.sottomenu:visited.a.sottomenu:hover{   
        font-size:13px;
        line-height:15px;
        letter-spacing:1px;
    }
    .sottomenuPipe{        
        width:2px;
        height:20px;
        margin:0px;
    }    
}