/*
 Theme Name:   Salute Solidale - GeneratePress Child
 Description:  GeneratePress child theme by Forma Srl
 Author:       Forma Srl per Salute Solidale
 Author URI:
 Template:     generatepress
 Version:      0.1
*/
:root {
    --black-100: #fafafb;
    --black-200: #f5f5f5;
    --black-300: #eaeaea;
    --black-400: #c4c4c4;
    --black-500: #807e7e;
    --black-600: #605f5f;
    --black-700: #3f3b3b;
    --black-800: #212121;
    --black-900: #121212;
    --blue-50: #e6f0ff;
    --blue-100: #a8cbfe;
    --blue-200: #81b4fe;
    --blue-300: #5a9cfe;
    --blue-400: #3485fd;
    --blue-500: #0D6EFD;
    --blue-600: #0b5cd5;
    --blue-700: #094bac;
    --blue-800: #073984;
    --blue-900: #05285b;
    --green-50: #e6f6ee;
    --green-100: #c2e9d6;
    --green-200: #9bdbbd;
    --green-300: #6fcea3;
    --green-400: #4ac38f;
    --green-500: #17b87b;
    --green-600: #0fa870;
    --green-700: #059662;
    --green-800: #028456;
    --green-900: #016440;
    --red-100: #ffcad1;
    --red-200: #f49597;
    --red-300: #ec6a6f;
    --red-700: #db0828;
    --red-400: #f7444a;
    --red-500: #fc2a2e;
    --red-800: #ce0020;
    --red-900: #c00012;

    --main-color: #165184;
    --main-color-shadow: rgba(16, 70, 114, 0.25);
    --second-color: #6299BA;
    --second-color-shadow: rgba(22, 81, 132, 0.25);

    --font-regular: "LexendRegular";
    --font-medium: "LexendMedium";
    --font-bold: "LexendBold";

    --breakpoint-mobile-smaller-max: 479px;
    --breakpoint-mobile-min: 480px;
    --breakpoint-mobile-max: 767px;
    --breakpoint-tablet-min: 768px;
    --breakpoint-tablet-max: 979px;
    --breakpoint-desktop-smaller-min: 980px;
    --breakpoint-desktop-smaller-max: 1259px;
    --breakpoint-desktop-normal-min: 1260px;
    --breakpoint-desktop-normal-max: 1599px;
    --breakpoint-desktop-large-min: 1600px;

    --container-mobile: 95%;
    --container-smalldesktop: 940px;
    --container-desktop: 1110px;
    --container-desktop-nonav: 730px;
    --container-largedesktop: 1110px;
    --container-largedesktop-nonav: 730px;
}

.copyright-bar { margin:0 auto; }
.footer-bar img { max-height:5rem; width:auto; }

@media only screen and (min-width:768px) {
    .grid { display:grid; }
    ul.grid-list { list-style:none; margin-left:0; grid-template-columns:repeat(2, 1fr); grid-gap:1rem; grid-auto-rows: 1fr; }
    ul.grid-list li { padding:1.5rem; border-radius:.8rem; border:2px solid var(--main-color); box-shadow:0px 1px 3px var(--main-color-shadow); text-align:center; transition:.5s all; margin:auto 0; }
    ul.grid-list li:hover { background-color:var(--main-color); color:#FFF; transition:.2s all; }
    ul.grid-list li span { display:block; font-size:80%; }
    #consiglio-direttivo li:first-child { background-color:var(--main-color); color:#FFF; }
    #consiglio-direttivo li:first-child:hover { background-color:#FFF; color:var(--main-color); }
    #servizi-sanitari li { border:2px solid var(--second-color); }
    #servizi-sanitari li:hover { background-color:var(--second-color); }
    .ngg-galleryoverview.default-view .ngg-gallery-thumbnail-box { margin-left:1rem; margin-bottom:1rem; border-radius:.8rem; border:2px solid var(--main-color); }
    .ngg-galleryoverview.default-view .ngg-gallery-thumbnail-box img { border-radius:.8rem; /*border:2px solid var(--main-color);*/ opacity:.4; }
    .ngg-galleryoverview.default-view .ngg-gallery-thumbnail:hover img { opacity:1; }

}


@media only screen and (min-width:980px) {
    .grid { display:grid; }
    ul.grid-list { list-style:none; margin-left:0; grid-template-columns:repeat(4, 1fr); grid-gap:1rem; grid-auto-rows: 1fr; }
    /* ul.grid-list li { padding:1.5rem; border-radius:.8rem; border:2px solid var(--main-color); box-shadow:0px 1px 3px var(--main-color-shadow); text-align:center; transition:.5s all; margin:auto 0; }
    ul.grid-list li:hover { background-color:var(--main-color); color:#FFF; transition:.2s all; }
    ul.grid-list li span { display:block; font-size:80%; }
    #servizi-sanitari li { border:2px solid var(--second-color); }
    #servizi-sanitari li:hover { background-color:var(--second-color); } */

}