/**
 * Basic CSS Media Query Template
 * TODO: I should probably use Sass...
 * Author: Michael Vieth
 * ------------------------------------------
 *  Responsive Grid Media Queries - 1280, 1024, 768, 480
 *   1280-1024   - desktop (default grid)
 *   1024-768    - tablet landscape
 *   768-480     - tablet 
 *   480-less    - phone landscape & smaller
 * --------------------------------------------
 */

 
.it-header-center-wrapper, 
.menu-wrapper, 
.it-header-navbar-wrapper,
.custom-btn-area-personale
{
    background-color: red !important;
}


.it-header-slim-wrapper-content,
.it-header-slim-wrapper{
     background-color: rgb(155, 0, 0) !important;
}


.it-header-slim-wrapper-content a {
    background-color: rgb(155, 0, 0) !important;
}
.simple-link {
    color: blue;
}
a{
    color: red;
}
a:hover{
    color: blue;
}
.breadcrumb-item, .breadcrumb-item a{
    color: red !important;
}
.btn-outline-primary{
    box-shadow: inset 0 0 0 2px red; /* colore del bordo dei bottini con link interno*/
    color: red; /* colore del testo contenuto in bottoni*/
}
.btn-outline-primary:hover{
    box-shadow: inset 0 0 0 2px blue; /* colore del bordo dei bottini con link interno*/
    color: blue; /* colore del testo contenuto in bottoni*/
}

.icon-primary{
        fill: rgb(0, 0, 0) !important;
}
.card-title{ /*colore del testo, titolo delle card in amministrazione*/
    color: blue;
}
.bg-primary{ /* colore di sfondo di Quanto sono chiare le informazioni su questa pagina? */
    background-color: red !important;
}
.custom-icon-search{
    fill: black !important;
}
.icon:hover{
    fill: blue;
}
.read-more a{
    fill: red !important;
}
.text{
    color: blue;
}
.useful-links-section .list-item.active span{
    color: blue !important;
}
.custom-icon-cascata{
    width: 54px !important;
    height: 54px !important;
}
.custom-icon-storia{
    width: 48px !important;
    height: 48px !important;
}
.custom-icon-arte{
    width: 48px !important;
    height: 48px !important;
}
.custom-icon-accoglienza{
    width: 48px !important;
    height: 48px !important;
}
.custom-icon-personaggi{
    width: 48px !important;
    height: 48px !important;
}


@media all and (min-width: 1024px) and (max-width: 1280px) {
    
 }

@media all and (min-width: 768px) and (max-width: 1024px) {
   .custom-burger-menu{
    background-color: red !important;
   }
.it-header-center-wrapper, 
.menu-wrapper, 
.it-header-navbar-wrapper,
.custom-btn-area-personale
{
    background-color: rgb(255, 0, 0) !important;
}
.it-brand-title{
    color:  white !important;
   }
   a.nav-link{
    color:  white !important;
}
}

@media all and (min-width: 480px) and (max-width: 768px) {
    .it-brand-title{
    color:  white !important;
   }
   .custom-burger-menu{
    background-color: red !important;
   }
.it-header-center-wrapper, 
.menu-wrapper, 
.it-header-navbar-wrapper,
.custom-btn-area-personale
{
    background-color: rgb(255, 0, 0) !important;
}
a.nav-link{
    color:  white !important;
}
}


@media all and (max-width: 480px) { 
   
   .custom-burger-menu{
    background-color: red !important;
   }
   .it-brand-title{
    color:  white !important;
   }
   li
   {
     color:  white !important;
     fill: white !important;
     
   }
.it-header-center-wrapper, 
.menu-wrapper, 
.it-header-navbar-wrapper,
.custom-btn-area-personale
{
    background-color: rgb(255, 0, 0) !important;
}
a.nav-link{
    color:  white !important;
}
}